.dropdown {
  @apply relative bg-white rounded-sm shadow-sm cursor-pointer;
  .dropdown-wrap {
    @apply p-2 inline-block w-full transition-all duration-200 ease-linear hover:bg-gray-50;
    .dropdown-text {
      @apply flex items-center justify-between w-full transition-all duration-200 ease-linear;
    }
    &:hover,
    &:focus,
    &:focus-within {
      .dropdown-text {
        @apply text-primary-600;
      }
    }
    .dropdown-wrap-icon {
      @apply inline-block transform transition-all duration-300 ease-in-out;
    }
  }

  .dropdown-content {
    @apply -z-1 bg-white w-40 overflow-hidden absolute left-0 md:left-[initial] right-0 bottom-auto mt-1 rounded-md shadow-lg opacity-0 transition-all duration-500 ease-in-out list-none;
    .dropdown-item {
      @apply no-underline bg-transparent block text-left text-gray-700 px-4 py-2 transition-all duration-400 ease-in-out w-full;
      &:hover {
        @apply bg-primary-500 text-white;
      }
    }

    .dropdown-divider {
      @apply my-2 mx-6 border-t-2 border-gray-200;
    }

    .dropdown-title {
      @apply font-semibold px-4 my-2 text-xs text-gray-600/50 uppercase;
    }

    &.is-fade-up {
      top: 200%;
    }
  }
  .user-dropdown,
  .wrap-text {
    @apply flex items-center justify-between w-full;
    &:hover,
    &:focus,
    &:focus-within {
      @apply text-primary-600;
    }
  }

  svg {
    @apply ml-2 transition-all duration-200 ease-in-out;
  }
  &.is-focused:focus,
  &.is-hovered:hover {
    .dropdown-content {
      @apply opacity-100 z-10;
      &.is-fade-up {
        top: 100%;
      }
    }
    svg,
    .user-dropdown svg {
      @apply rotate-180;
    }
  }
  &.is-focused:focus {
    @apply outline-1 outline-blue-500 outline;
  }
  &.has-large-text {
    .dropdown-content {
      @apply w-auto;
      .dropdown-item, button {
        @apply whitespace-nowrap;
      }
    }
  }

  &.dropdown-primary {
    .dropdown-wrap {
      @apply hover:bg-primary-50;
    }
    .dropdown-content {
      .dropdown-item {
        &:hover {
          @apply bg-primary-600 text-white;
        }
      }
    }
  }
  &.dropdown-secondary {
    .dropdown-wrap {
      @apply hover:bg-secondary-50;
      &:hover,
      &:focus,
      &:focus-within {
        .dropdown-text {
          @apply text-secondary-600
        }
      }
    }
    .dropdown-content {
      .dropdown-item {
        &:hover {
          @apply bg-secondary-600 text-white;
        }
      }
    }
  }
  &.dropdown-tertiary {
    .dropdown-wrap {
      @apply hover:bg-tertiary-50;
      &:hover,
      &:focus,
      &:focus-within {
        .dropdown-text {
          @apply text-tertiary-600
        }
      }
    }
    .dropdown-content {
      .dropdown-item {
        &:hover {
          @apply bg-tertiary-600 text-white;
        }
      }
    }
  }
}