//!
//! dselect.scss
//! Yohn https://github.com/Yohn split to create a standalone file
//! and have one file include all bootstrap 5 files
//!
@import "../../node_modules/bootstrap/scss/functions";
// @import "your-custom-variables";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/mixins";

$dselect-clear-icon-width: .625rem;

.dselect-wrapper {
  // Toggler
  .form-select {
    padding-left: $form-select-padding-x;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .25rem;
    text-align: left;
    &.show { // ref: form-select:focus
      border-color: $form-select-focus-border-color;
      outline: 0;
      @if $enable-shadows {
        @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
      } @else {
        // Avoid using mixin so we can pass custom focus shadow properly
        box-shadow: $form-select-focus-box-shadow;
      }
    }
    &.dselect-clearable {
      padding-right: add($form-select-indicator-padding + ($form-select-padding-x / 2), $dselect-clear-icon-width);
    }
    &.form-select-sm {
      padding-left: $form-select-padding-x-sm;
      &.dselect-clearable {
        padding-right: add($form-select-indicator-padding + ($form-select-padding-x-sm / 2), $dselect-clear-icon-width);
      }
    }
    &.form-select-lg {
      padding-left: $form-select-padding-x-lg;
      &.dselect-clearable {
        padding-right: add($form-select-indicator-padding + ($form-select-padding-x-lg / 2), $dselect-clear-icon-width);
      }
    }
  }

  // Menu
  .dropdown-menu {
    padding: $form-select-padding-x / 2;
    width: 100%;
    > .flex-column {
      gap:$form-select-padding-x / 2;
    }
  }
  .form-select-sm + .dropdown-menu {
    padding: $form-select-padding-x-sm / 2;
    @include font-size($form-select-font-size-sm);
  }
  .form-select-lg + .dropdown-menu {
    padding: $form-select-padding-x-lg / 2;
    @include font-size($form-select-font-size-lg);
  }

  // Item
  .dropdown-item,
  .dropdown-header {
    padding-left: $form-select-padding-x / 2;
    padding-right: $form-select-padding-x / 2;
  }
  .form-select-sm + .dropdown-menu .dropdown-item,
  .form-select-sm + .dropdown-menu .dropdown-header {
    padding-left: $form-select-padding-x-sm / 2;
    padding-right: $form-select-padding-x-sm / 2;
  }
  .form-select-lg + .dropdown-menu .dropdown-item,
  .form-select-lg + .dropdown-menu .dropdown-header {
    padding-left: $form-select-padding-x-lg / 2;
    padding-right: $form-select-padding-x-lg / 2;
  }

  // Search input
  .form-control {
    @if $enable-rounded {
      border-radius: $border-radius - $input-border-width;
    } @else {
      border-radius: 0 !important;
    }
    box-shadow: 0 0 $focus-ring-blur $focus-ring-width / 50 $focus-ring-color !important;
    border-color: none !important;
    padding: $dropdown-item-padding-y subtract($form-select-padding-x / 2, $input-border-width);
    font-size: inherit;
    &:focus {
      border-color: $input-focus-border-color;
    }
  }
  .form-select-sm + .dropdown-menu .form-control {
    padding: subtract($dropdown-item-padding-y, 1px) subtract($form-select-padding-x-sm / 2, $input-border-width);
  }
  .form-select-lg + .dropdown-menu .form-control {
    padding: $dropdown-item-padding-y subtract($form-select-padding-x-lg / 2, $input-border-width);
  }

  // No results
  .dselect-no-results {
    padding: $dropdown-item-padding-y $form-select-padding-x / 2;
  }
  .form-select-sm + .dropdown-menu .dselect-no-results {
    padding: subtract($dropdown-item-padding-y, 1px) $form-select-padding-x-sm / 2;
  }
  .form-select-lg + .dropdown-menu .dselect-no-results {
    padding: $dropdown-item-padding-y $form-select-padding-x-lg / 2;
  }

  // Tag
  .dselect-tag {
    // Yohn removed so we can using text-bg-color classes for custom color
    //background-color: $secondary;
    //color: $light;
    padding-left: add(.5rem, 14px);
    padding-right: .5rem;
    border-radius: $border-radius;
    height: calc(#{$form-select-line-height} * #{$font-size-base});
    line-height: calc((#{$form-select-line-height} * #{$font-size-base}) - 1px);
    position: relative;
    opacity: .8;
    @include transition(opacity .3s ease);
    &:hover {
      opacity: 1;
    }
  }
  .form-select-sm .dselect-tag {
    height: auto;
    line-height: inherit;
  }
  .form-select-lg .dselect-tag {
    height: calc(#{$form-select-line-height} * #{$font-size-lg});
    line-height: calc(#{$form-select-line-height} * #{$font-size-lg});
  }
  .dselect-tag-remove {
    position: absolute;
    left: .25rem;
    top: 50%;
    margin-top: -7px;
    color: rgba($light, .35);
    @include transition(color .15s ease-in-out);
    &:hover {
      color: $light;
    }
  }

  // Placeholder
  .dselect-placeholder {
    color: $input-placeholder-color;
  }

  // Optgroups
  .dropdown-header ~ .dropdown-item {
    padding-left: $form-select-padding-x;
    padding-right: $form-select-padding-x;
  }
  .form-select-sm + .dropdown-menu .dropdown-header {
    font-size: .85em;
    ~ .dropdown-item {
      padding-left: $form-select-padding-x-sm;
      padding-right: $form-select-padding-x-sm;
    }
  }
  .form-select-lg + .dropdown-menu .dropdown-header {
    font-size: .85em;
    ~ .dropdown-item {
      padding-left: $form-select-padding-x-lg;
      padding-right: $form-select-padding-x-lg;
    }
  }

  // Clear
  .dselect-clear {
    position: absolute;
    padding: 0;
    border: 0;
    box-shadow: none;
    top: 0;
    bottom: 0;
    right: $form-select-indicator-padding;
    display: flex;
    align-items: center;
    color: $text-muted;
    cursor: pointer;
    &:hover {
      color: inherit;
    }
    svg {
      width: $dselect-clear-icon-width;
      height: $dselect-clear-icon-width;
    }
  }
  [data-dselect-text=""] ~ .dselect-clear {
    display: none;
  }

  // Validation
  .was-validated .form-select:invalid + & .form-select,
  .form-select.is-invalid + & .form-select {
    border-color: $form-feedback-invalid-color;
    &.show,
    &:focus {
      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($form-feedback-invalid-color, $input-btn-focus-color-opacity);
    }
  }
  .was-validated .form-select:valid + & .form-select,
  .form-select.is-valid + & .form-select {
    border-color: $form-feedback-valid-color;
    &.show,
    &:focus {
      box-shadow: 0 0 $input-btn-focus-blur $input-focus-width rgba($form-feedback-valid-color, $input-btn-focus-color-opacity);
    }
  }

	// when they use the up / down / tab to get to link it makes it `.active`
	.dropdown-item:focus-visible,
	.dropdown-item:focus-within {
		color: var(--bs-dropdown-link-active-color);
		text-decoration: none;
		background-color: var(--bs-dropdown-link-active-bg);
		outline: none !important;
		border-style:none !important;
		border-color:transparent !important;
	}
}

.input-group-lg > .dselect-wrapper > .form-select {
  padding: $input-padding-y-lg $input-padding-x-lg;
  @include font-size($input-font-size-lg);
  @include border-radius($input-border-radius-lg);
}

.input-group-sm > .dselect-wrapper > .form-select {
  padding: $input-padding-y-sm $input-padding-x-sm;
  @include font-size($input-font-size-sm);
  @include border-radius($input-border-radius-sm);
}
.input-group-lg > .dselect-wrapper > .form-select,
.input-group-sm > .dselect-wrapper > .form-select {
  padding-right: $form-select-padding-x + $form-select-indicator-padding;
}

.input-group {
  > .dselect-wrapper {
    position: relative; // For focus state's z-index
    flex: 1 1 auto;
    width: 1%;
    min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
  }
  > .dselect-wrapper:focus {
    z-index: 5;
  }
  > .dselect-wrapper:last-child > .form-select {
    @include border-start-radius(0);
  }
  > .dselect-wrapper:nth-last-child(n + 3) > .form-select {
    @include border-end-radius(0);
  }
	//! I think this can be taken out
  > .form-select:first-child + .dselect-wrapper:not(:last-child) > .form-select {
    @include border-end-radius(0);
  }
  &.has-validation {
		> .dselect-wrapper:nth-last-child(n + 4) + .form-select,
		> :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating):not(.dselect-wrapper) + .form-select:not(:last-child) {
			border-radius: 100%;
			//@include border-end-radius(1);
		}

		//},
    //> .dropdown-toggle:nth-last-child(n + 4),
    //> .form-floating:nth-last-child(n + 3) > .form-control,
    //> .form-floating:nth-last-child(n + 3) > .form-select {
    //  @include border-end-radius(0);
    //}
  }
}
.input-group.has-validation > .dselect-wrapper:not(:nth-last-child(n+4)) > .form-select {
	@include border-end-radius($border-radius);
	@include border-start-radius(0);
}



/*
.input-group.has-validation > .dropdown-toggle:nth-last-child(n+4),
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control,
.input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select,
.input-group.has-validation > :nth-last-child(n+3):not(.dselect-wrapper) + .form-selct


.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),

.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3),

.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control,

.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select

*/