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

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

.x-dropdown-with-icons {
  .dropdown-header,
  .dropdown-item {
    padding-left: $x-dropdown-item-space;
  }
  .dropdown-divider {
    @extend .my-0;
    margin-left: $x-dropdown-item-space;
  }
	.dropdown-item {
    @extend .d-flex,
            .rounded-0,
						.align-items-center;

    .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 {
  @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-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-z-index {
  z-index: 2000;
}

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

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

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