/*
 * OMNIA — Canonical Searchable Select R1.1
 */

.ms-searchable-select {
  position: relative;
  width: 100%;
  min-width: 0;
}

.ms-searchable-select-input {
  box-sizing: border-box;
  width: 100%;
  min-height: 40px;
  padding: 8px 36px 8px 11px;

  border:
    1px solid
    var(
      --ms-border-color,
      rgba(120,135,155,.34)
    );

  border-radius: 8px;

  background:
    linear-gradient(
      45deg,
      transparent 50%,
      currentColor 50%
    )
    calc(100% - 16px)
    calc(50% - 2px)
    / 5px 5px no-repeat,

    linear-gradient(
      135deg,
      currentColor 50%,
      transparent 50%
    )
    calc(100% - 11px)
    calc(50% - 2px)
    / 5px 5px no-repeat,

    var(
      --ms-surface,
      #fff
    );

  color:
    var(
      --ms-text-primary,
      #172033
    );

  font: inherit;
  line-height: 1.25;
  outline: none;
}

.ms-searchable-select-input:focus {
  border-color:
    var(
      --ms-accent,
      #238eff
    );

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(
        --ms-accent,
        #238eff
      ) 18%,
      transparent
    );
}

.ms-searchable-select.is-disabled
.ms-searchable-select-input {
  cursor: not-allowed;
  opacity: .58;
}

.ms-searchable-select-native {
  position: absolute !important;

  width: 1px !important;
  height: 1px !important;

  margin: -1px !important;
  padding: 0 !important;

  overflow: hidden !important;

  clip:
    rect(0 0 0 0) !important;

  clip-path:
    inset(50%) !important;

  white-space:
    nowrap !important;

  border: 0 !important;
  opacity: 0 !important;

  pointer-events:
    none !important;
}

.ms-searchable-select-list {
  position: absolute;
  z-index: 10020;

  top: calc(100% + 5px);
  left: 0;
  right: 0;

  max-height:
    min(320px, 42vh);

  overflow: auto;

  padding: 5px;

  border:
    1px solid
    var(
      --ms-border-color,
      rgba(120,135,155,.34)
    );

  border-radius: 9px;

  background:
    var(
      --ms-surface,
      #fff
    );

  box-shadow:
    0 14px 36px
    rgba(0,0,0,.18);
}

.ms-searchable-select-list[hidden] {
  display: none !important;
}

.ms-searchable-select-option {
  display: block;
  width: 100%;

  min-height: 36px;

  padding: 8px 10px;

  border: 0;
  border-radius: 6px;

  background: transparent;

  color:
    var(
      --ms-text-primary,
      #172033
    );

  font: inherit;
  line-height: 1.25;

  text-align: left;
  cursor: pointer;
}

.ms-searchable-select-option:hover,
.ms-searchable-select-option.is-active {
  background:
    color-mix(
      in srgb,
      var(
        --ms-accent,
        #238eff
      ) 13%,
      transparent
    );
}

.ms-searchable-select-option.is-selected {
  font-weight: 750;
}

.ms-searchable-select-empty {
  padding: 10px;

  color:
    var(
      --ms-text-secondary,
      #667085
    );

  font-size: .9em;
}

[data-theme="dark"]
.ms-searchable-select-input,

.theme-dark
.ms-searchable-select-input,

.dark
.ms-searchable-select-input,

html.ms-theme-navy-glossy
.ms-searchable-select-input,

[data-theme="dark"]
.ms-searchable-select-list,

.theme-dark
.ms-searchable-select-list,

.dark
.ms-searchable-select-list,

html.ms-theme-navy-glossy
.ms-searchable-select-list {
  background-color:
    var(
      --ms-surface,
      #101b2b
    );

  color:
    var(
      --ms-text-primary,
      #f3f6fa
    );
}

@media (max-width: 767px) {
  .ms-searchable-select-input {
    min-height: 44px;
  }

  .ms-searchable-select-list {
    max-height: 38vh;
  }

  .ms-searchable-select-option {
    min-height: 42px;
  }
}