@use '../../helpers';
@use '../../mixins';
@use '../icon/icon';

@mixin OptionList() {
  @include icon.Icon();

  @if not mixins.includes('OptionList') {
    @include _OptionList();
  }
}

@mixin _OptionList() {
  .ods-option-list {
    background-color: helpers.color('background-input');
    border: helpers.space(0.125) solid helpers.color('border-input');
    border-radius: helpers.border-radius('medium');
    box-shadow: 0 helpers.space(0.25) helpers.space(0.5) rgb(0 0 0 / 0.25);
    box-sizing: border-box;
    max-height: helpers.space(30);
    max-width: helpers.space(50);
    overflow: hidden;
    overflow-y: auto;
    padding: helpers.space(0.5) 0;
    pointer-events: initial;
  }

  .ods-option {
    @include helpers.font('300-regular');
    @include mixins.interactive();

    align-items: center;
    color: helpers.color('content-main');
    display: grid;
    position: relative;
    text-align: left;
  }

  .ods-option-input {
    height: 0;
    margin: 0;
    opacity: 0;
    position: absolute;
    width: 0;

    &:active,
    &:focus {
      + .ods-option-content {
        @include mixins.inner-focus('action');
      }
    }

    &:checked {
      + .ods-option-content {
        background-color: helpers.color('background-action-subtle');
      }

      ~ .ods-icon {
        opacity: 1;
      }
    }

    &:disabled {
      + .ods-option-content {
        background-color: helpers.color('background-disabled');
        box-shadow: initial;
        color: helpers.color('content-disabled');
        cursor: not-allowed;
      }
    }
  }

  .ods-option-content {
    @include _with-padding();

    position: relative;
    transition: background-color ease helpers.time(1);

    &:hover {
      background-color: helpers.color('background-action-subtle-hover');
    }
  }

  :where(.ods-option) > .ods-icon {
    color: helpers.color('content-action');
    opacity: 0;
    position: absolute;
    right: helpers.space(1.5);
    transition: opacity ease helpers.time(1);
  }

  .ods-option-group {
    @include helpers.font('200-allcaps');

    background-color: helpers.color('background-main');
    border: 0 solid helpers.color('border-separator');
    border-width: helpers.space(0.125) 0;
    color: helpers.color('content-placeholder');
    padding: helpers.space(0.5) helpers.space(2);
    text-transform: uppercase;
  }
}

@mixin _with-padding($border-width: 0) {
  @if type-of($border-width) != number {
    @error '$border-width must be a number';
  }

  $padding-horizontal: helpers.space(2) - $border-width;
  $padding-vertical: helpers.space(1.5) - $border-width;

  padding: $padding-vertical $padding-horizontal;
  padding-right: $padding-horizontal + helpers.space(4); // extra space for icon
}