.component-dropdown, .component-filter_dropdown {
  display: flex;

  position: relative;
  min-width: calculateRem(100);

  &.dark {
    .value {
      border: none;

      background-color: $builda-darkgray;
      color: setTextColor($builda-darkgray);

      &:hover {
        background-color: setLinkHoverColor($builda-darkgray);
      }

      .text {
        &.placeholder {
          color: inherit;
        }
      }

      .icon {
        border-left: 1px solid $white;
        padding-left: calculateRem(8);
      }
    }
  }

  &.open-up {
    .options {
      top: auto;
      bottom: 100%;

      border-top: 1px solid $admin-primary-color;
      border-bottom: none;
    }
  }

  .value {
    display: flex;
    justify-content: space-between;

    width: 100%;

    border: 1px solid $input-border-gray;

    padding-top: calculateRem(6);
    padding-right: calculateRem(12);
    padding-bottom: calculateRem(6);
    padding-left: calculateRem(12);

    background-color: transparent;
    color: $builda-darkgray;

    &:hover {
      border-color: $input-hover-gray;
    }

    &.options-open {
      border-color: $admin-primary-color;
    }

    .text {
      margin-right: calculateRem(20);

      &.placeholder {
        color: $input-border-gray;
      }
    }

    .icon {
      align-self: center;
    }
  }

  ul.options {
    position: absolute;
    top: 100%;

    width: 100%;
    
    border: 1px solid $admin-primary-color;
    border-top: none;

    margin-top: 0;
    margin-bottom: 0;

    padding-left: 0;

    background-color: $background-white;
    color: $builda-darkgray;

    z-index: 11;

    li {
      display: block;

      padding-top: calculateRem(6);
      padding-right: calculateRem(12);
      padding-bottom: calculateRem(6);
      padding-left: calculateRem(12);

      &:not(.no-hover):hover {
        background-color: $builda-darkgray;
        color: setTextColor($builda-darkgray);
      }

      &.selected {
        background-color: $admin-primary-color;
        color: setTextColor($admin-primary-color);
      }
    }
  }
}