// Name:            Dropdown
// Description:     Display a list of items in a dropdown menu
//
// Component:       `c-dropdown`
//
// Variants:        `.c-dropdown--network`
//
// States:          `.is-open`
//
//
// ========================================================================
@use '../../../assets/sass/settings/v7/colors.tokens' as *;
@use '../../../assets/sass/settings/v7/layout-standard' as *;
@use '../../../assets/sass/settings/v7/global' as *;
@use '../../../assets/sass/settings/v7/spacing.tokens' as *;
@use '../../../assets/sass/tools/v7/mq' as *;
@use '../../../assets/sass/tools/v7/zindex' as *;
@use '../../../assets/sass/tools/v7/typography' as *;

// Variables
// ========================================================================

$dropdown-network-background: var(--theme-color);
$dropdown-brand-size: 50px;
$dropdown-position: 0;
$dropdown-user-panel-size: 200px;
$dropdown-user-panel-top: 46px;
$dropdown-panel-size: 264px;
$dropdown-panel-top: 3rem;
$dropdown-filter-panel-top: 4rem;

// ========================================================================

.c-dropdown {
  --dropdown-width: auto;
  --dropdown-border-color: var(--form-input-border); 
  --dropdown-border-radius: #{$global-radius}; 
  --dropdown-background-color: var(--form-input-bg);
  
  width: var(--dropdown-width);
  border-width: 1px;
  border-style: solid;
  border-radius: var(--dropdown-border-radius);
  border-color: var(--dropdown-border-color);
  background-color: var(--dropdown-background-color);
  transition: $global-interactive-transition;
  @include bp(lg){
    --dropdown-width: #{$dropdown-panel-size};
  }

  //
  // States
  //
  
  &:hover {
    --dropdown-border-color: var(--form-control-hover);
  }

  &:active,
  &:focus {
    --dropdown-border-color: #{$active-01};
  }

  &:focus {
    --dropdown-background-color: var(--form-control-bg);
    outline: none;
    outline-offset: 0;
    box-shadow: 0 0 0 .2rem $focus-01;
    
    [data-dd-icon] {
      transform: rotate(180deg);
      transition: $global-interactive-transition;
    }
  }
  
  &__item {
    cursor: auto;
    
    &:hover {
      background-color: var(--background-color-gray);
    }
  }

  &__list {
    height: auto;
    max-height: 50vh;
  }

  &__panel {
    display: none;
    top: $dropdown-panel-top;
    left: 0;
    width: 140%;
    border-width: 1px;
    border-style: solid;
    border-radius: $global-radius;
    border-color: var(--form-input-border);
    background-color: var(--background-color);
    transition: $global-interactive-transition;
    animation: showitem .3s ease-in-out;
    @include z(cover);
    @include bp(md){
      width: 100%;
    }

    .c-dropdown--right & {
      right: 0;
      left: auto;
    }
    
    .c-dropdown--network & {
      top: auto;
      background-color: $dropdown-network-background;
    }

    .c-dropdown--user & {
      top: $dropdown-user-panel-top;
      left: auto;
      width: $dropdown-user-panel-size;
    }

    .c-dropdown--filter & {
      top: $dropdown-filter-panel-top;
    }

    .c-dropdown:not(.c-dropdown--network):focus-within & {
      display: block;
      width: max-content;
    }

    .c-dropdown--network:focus-within & {
      display: flex;
    }
  }

  &__brand {
    width: auto;
    min-width: $dropdown-brand-size;
    height: $dropdown-brand-size;
    transition: transform .35s ease-in-out;
    &:hover {
      transform: scale(1.3);
    }
  }

  

  &__label {
    color: var(--body-secondary-color);
    cursor: auto;
    @include type(label-07);
    
    .c-dropdown__panel & {
      padding: $padding-small $padding-xsmall;
      border-width: 0;
      border-top-width: 1px;
      border-style: solid;
      border-color: var(--divider-color);

      &:not(:first-child){
        margin-top: $margin-xsmall;
      }
    }

  }

  

  &--network {
    --dropdown-width: 100%;
  }

  &--user {
    --dropdown-width: auto;
  }

  &--reset {
    --dropdown-background-color: transparent;
    --dropdown-border-color: transparent;
    --dropdown-border-radius: 0;
    
    &:hover,
    &:focus {
      --dropdown-border-color: transparent;
      --dropdown-background-color: transparent;
      box-shadow: none;
    }

    & ~ .c-dropdown__panel {
      border: transparent;
      background-color: transparent;
    }
  }
}