/*///// Tom-Select theme https://tom-select.js.org /////*/

.ts-control {
  position: relative;
  overflow: hidden;
  display: flex;
  width: 100%;
  justify-items: start;
  align-items: stretch;
  min-height: $btn-height;
  padding: $spacing-xs $spacing-lg $spacing-xs $spacing-sm;
  font-size: $font-size-base;
  border-radius: $border-radius;
  color: $white;
  background-color: $primary;
}

.ts-control input {
  font-size: $font-size-base;
  color: $white;
}

.ts-control,
.full .ts-control, 
.ts-wrapper.single.input-active .ts-control {
  background-color: $primary;
  border: none;
  &:hover {
    background-color: $link-hover-color;
  }
  &:hover input::placeholder {
    color: $white;
  }
}

.ts-control input::placeholder {
  color: $placeholder-color;
  font-style: italic;
  font-size: $font-size-base;
}

.ts-control::before {
  content: "";
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 0;
  top: 0;
  width: $input-height;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: $border-width;
  border-left-style: solid;
  border-left-width: $border-width;
  border-top-left-radius: 0;
  border-top-right-radius: $border-width;
}

.ts-control::after {
  content: "";
  position: absolute;
  display: inline-block;
  right: 14px;
  top: 50%;
  height: $icon;
  width: 12px;
  margin-top: -($spacing-xs);
  mask-image: url("@images/arrow-down.svg");
  mask-repeat: no-repeat;
  background-color: $white;
}

.ts-wrapper.dropdown-active .ts-control::after {
  mask-image: url("@images/arrow-up.svg");
}

.ts-control:hover, 
.form-select.inverted .ts-control:hover, 
.form-group.inverted .ts-control:hover, 
.multi-select.inverted .ts-control:hover,
.field_with_errors .ts-control:hover {
  background-color: $link-hover-color;
  border-color: $link-hover-color;
  color: $white;

  &::before {
    background-color: $link-hover-color;
  }
  &::after {
    background-color: $white;
  }
}

.ts-wrapper.dropdown-active .ts-control {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ts-wrapper .ts-dropdown {
  margin: 0;
  background-color: $petrol;
  color: $white;
  border-radius: 0 $border-radius;
  border: none;
  overflow: hidden;
}

.ts-dropdown-content {
  scrollbar-width: thin;
}

.ts-dropdown .option {
  width: 100%;
  display: flex;
  align-items: center;
  padding: $spacing-xs $spacing-sm;
  color: $white;
  background-color: transparent;
  &:hover {
    background-color: $link-hover-color;
  }
}

.ts-dropdown .option.selected {
  color: $white;
  background-color: $primary;

  &::before {
    content: "";
    display: inline-block;
    mask-image: url("@images/check-circle-filled.svg");
    width: 20px;
    height: 20px;
    margin-right: $icon-spacing;
    background-color: $white;
  } 
}

.ts-dropdown .option.selected:hover {
  background-color: $link-hover-color;
}


/* Multi select item */

.tom-select-multi .ts-control {
  padding-right: $spacing-lg !important;
}

.tom-select-multi .ts-control,
.tom-select-multi .ts-control input {
  cursor: pointer;
}

.tom-select-multi.has-items .ts-control input {
  padding-top: $spacing-xxs !important;
  padding-bottom: $spacing-xxs !important;
}

.ts-wrapper.multi .ts-control div.item {
  position: relative;
  flex-direction: row;
  flex-grow: 0;
  align-items: stretch;
  margin-right: $spacing-xxs;
  margin-bottom: $spacing-xxs;
  padding-left: $spacing-xxs;
  padding-right: 0;
  font-size: $font-size-sm;
  color: $black;
  background-color: $white;
  border-radius: $border-radius;
  line-height: 25px;

  a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: $primary;
    margin-top: -2px;
    margin-bottom: -2px;
    border-top-right-radius: $border-radius;
    border-bottom-right-radius: $border-radius;
  }

  a::after {
    content: "";
    display: inline-block;
    mask-image: url("@images/cross-thick.svg");
    width: 10px;
    height: 10px;
    background-color: $primary;
  }

  a:hover {
    background-color: $danger;
  }

  a:hover::after {
    background-color: $white;
  }
}

.ts-wrapper.multi .ts-control div.item.active {
  background-color: $link-hover-color;
}


.ts-wrapper .optgroup-header {
  padding: $spacing-xs $spacing-sm $spacing-xxs $spacing-sm;
  font-size: $font-size-sm;
  color: $gray-light;
  background-color: transparent;
}


/*///// Validation errors /////*/

.field_with_errors .ts-control, 
.form-select.inverted .field_with_errors .ts-control,
.form-group.inverted .field_with_errors .ts-control {
  background-color: $danger;
}

.field_with_errors .ts-control::before,
.form-select.inverted .field_with_errors .ts-control::before,
.form-group.inverted .field_with_errors .ts-control::before {
  content: "";
  cursor: pointer;
  color: $white;
  background-color: $danger;
}

.field_with_errors .form-label,
.form-select.inverted .field_with_errors .form-label,
.form-group.inverted .field_with_errors .form-label {
  color: $danger;
}


/*///// Disabled /////*/

.ts-wrapper.disabled .ts-control,
.ts-wrapper.locked .ts-control {
  background-image: url("@images/pattern-striped-bright.png");
  background-repeat: repeat;
  background-color: transparent;
  border: $border-width solid $disabled;
  color: $disabled-dark;
  cursor: not-allowed;
  &:hover{
    color: $disabled;
    cursor: not-allowed;
  }
  &::before {
    background-color: transparent;
    border-left-color: $disabled;
  }
  &::after {
    background-color: $disabled-dark;
  }
  & input::placeholder {
    color: $disabled-dark;
  }
}