@import 'moda-themes/themes';

$icon-left-padding: 24px;

.mo-display-input__select-dropdown {
  width: calc(var(--width) + #{$icon-left-padding});
  z-index: var(--z-index);
  border: 1px solid color('elephant');
  font-family: font-family('sans');
  border-bottom: none;
  height: fit-content;
  font-size: 12px;
  line-height: 2;

  &-label {
    font-family: font-family('sans');
    margin-bottom: 5px;
    color: color('cement');
    font-size: 12px;
  }

  &.mo-display-input__select-dropdown--disabled {
    cursor: not-allowed;

    .collapsible-header {
      color: color('elephant');
      cursor: not-allowed;
    }

    .collapsible-container {
      border-color: color('elephant');
    }
  }

  .collapsible-header {
    color: color('cement');
    padding: 0 12px;

    i.collapsible-button {
      padding-left: $icon-left-padding;
      margin: 0;
    }
  }

  .collapsible {
    position: relative;
  }

  .collapsible-container {
    border: 1px solid color('elephant');
    background-color: color('white');
    box-sizing: content-box;
    position: absolute;
    margin-left: -1px;
    border-top: none;
    width: 100%;
  }

  .mo-display-input__option {
    line-height: 4;
    padding: 0 12px;
    cursor: pointer;

    &:hover {
      background-color: color('noise');
    }

    &.mo-display-input__option--disabled {
      color: color('elephant');
      cursor: not-allowed;
    }
  }
}