// Set default customise component variables here,
// Override it in theme variables files

$x-dropdown-item-space:        3rem;
$x-dropdown-item-space-lg:     5rem;

%x-dropdown-with-icons,
.x-dropdown-with-icons {
  @extend %px-1;

  .dropdown-header,
  .dropdown-item {
    @extend %py-1;
    padding-left: $x-dropdown-item-space;
  }
  .dropdown-divider {
    @extend %my-0;
    margin-left: $x-dropdown-item-space;
  }
	.dropdown-item {
    @extend %x-flex-a-center,
            .rounded-0;

    &.active {
      @include custom-theme-color(primary, color);
      background-color: #FFFFFF;
    }

    &:active {
      @include custom-theme-color(primary, color);
      @include custom-theme-color(primary-transparent, background-color);
    }

    .x-icon-container {
      @extend %x-icon-md,
              %position-absolute,
              %align-items-center;
      margin-left: - ($x-dropdown-item-space - map_get($spacers, 2) * 2);
    }
	}
}

%x-dropdown-with-icons-lg,
.x-dropdown-with-icons-lg {
  @extend %x-dropdown-with-icons;
  .dropdown-header,
  .dropdown-item {
    @extend %py-3;
  }
  @include media-breakpoint-up(sm) {
    .dropdown-header,
    .dropdown-item {
      padding-left: $x-dropdown-item-space-lg;
      font-size: $h4-font-size;
      .x-icon-container {
        font-size: map_get($icon-sizes, lg);
        margin-left: - ($x-dropdown-item-space-lg - map_get($spacers, 3) * 2);
      }
    }
    .dropdown-divider {
      margin-left: $x-dropdown-item-space-lg;
    }
  }
}


%x-dropdown-filter,
.x-dropdown-filter {
  @extend .x-dropdown-with-icons;

  .dropdown-item {
    .x-icon-container {
      @include transition($transition-fade);
      opacity: 0;
      display: flex;
    }
    @include x-hover-focus-active {
      .x-icon-container {
        opacity: 1;
      }
    }
  }
}

%x-dropdown-filter-lg,
.x-dropdown-filter-lg {
  @extend %x-dropdown-filter,
          %x-dropdown-with-icons-lg;
}

%x-btn-link-dropdown,
.x-btn-link-dropdown {
  @extend %btn-link,
          %px-0,
          %bg-transparent,
          %text-grey,
          %align-items-center,
          %border-0,
          %d-flex,
          %flex-nowrap,
          %cursor-pointer,
          %py-2;

  > *:last-child {
    @extend %ml-2;
  }

  .x-btn-text {
    @extend %d-lg-flex,
            %d-none,
            %text-nowrap;
  }

  @include x-hover-focus-active() {
    @include custom-theme-color(primary, color);
    text-decoration: none;
    outline: none;
  }
}

%x-dropdown,
.x-dropdown {
  .dropup & {
    top: auto !important;
    bottom: 100% !important;
  }
}