@import '../../../mixins/focus-state';
@import '../../../mixins/box-sizing';

:host {
  @include tds-box-sizing;

  display: block;
  background-color: var(--tds-dropdown-option-background);

  .dropdown-option {
    color: var(--tds-dropdown-option-color);
    border-bottom: 1px solid var(--tds-dropdown-option-border);
    font: var(--tds-detail-02);
    letter-spacing: var(--tds-detail-02-ls);
    overflow-wrap: anywhere;
    transition: background-color var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);

    &.selected {
      background-color: var(--tds-dropdown-option-background-selected);
    }

    &.disabled {
      color: var(--tds-dropdown-option-color-disabled);
    }

    & button:focus {
      outline: 2px solid var(--tds-dropdown-option-focus);
      box-shadow: inset 0 0 0 3px var(--tds-white);
      outline-offset: -2px;
    }

    button {
      all: unset;
      width: 100%;

      &.lg {
        padding: 19px 0 20px;
      }

      &.md {
        padding: 15px 0 16px;
      }

      &.sm {
        padding: 11px 0 12px;
      }

      &.xs {
        padding: 7px 0 8px;
      }

      .single-select {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
      }
    }

    .multiselect {
      width: 100%;
      height: 100%;

      tds-checkbox {
        display: flex;
        height: 100%;
        width: 100%;

        &.lg {
          padding: 15px 16px 16px;
        }

        &.md {
          padding: 11px 16px 12px;
        }

        &.sm {
          padding: 7px 16px 8px;
        }

        &.xs {
          padding: 7px 16px 8px;
        }
      }
    }

    &:hover {
      border-bottom-color: var(--tds-dropdown-option-border-hover);
      cursor: pointer;
    }

    &:hover.disabled {
      border-bottom-color: var(--tds-dropdown-option-border-hover);
      cursor: not-allowed;
    }
  }
}

:host([hidden]) {
  display: none;
}