@use '@funidata/fudis-core' as core;

.fudis-multiselect-option {
  @include core.text-color('gray-dark');

  width: auto;

  /* stylelint-disable-next-line selector-class-pattern */
  &:not(.fudis-multiselect-option--visible) {
    display: none;
    visibility: hidden;
  }

  /* stylelint-disable-next-line selector-class-pattern */
  &:hover:not(:has(.fudis-multiselect-option__label__checkbox__input[aria-disabled='true'])) {
    @include core.bg-color('primary-light');
  }

  &__disabled-text {
    padding-right: core.$spacing-xs;
  }

  &__label {
    @include core.body-text-md-regular;

    display: flex;
    align-items: flex-start;
    margin-bottom: 0;
    padding: core.$spacing-xs core.$spacing-xs core.$spacing-xs 0;

    &__checkbox {
      @include core.border('1px', 'solid', 'gray-middle');
      @include core.bg-color('white');

      display: flex;
      position: absolute;
      align-items: center;
      justify-content: center;
      margin-left: core.$spacing-xs;
      border-radius: 0;
      cursor: pointer;
      width: core.$spacing-sm;
      height: core.$spacing-sm;

      &--disabled {
        @include core.border('1px', 'dashed', 'gray-middle');
        @include core.bg-color('gray-extra-light');

        cursor: default;
      }

      &__icon {
        transform: scale(0.85);
      }

      &__input {
        @include core.box-reset;

        appearance: none;
        display: grid;
        position: absolute;
        place-content: center;

        &:not([aria-disabled='true']):focus {
          @include core.focus-checkbox;
        }
      }
    }

    &__text {
      position: relative;
      margin-left: core.$spacing-lg;

      &__main {
        display: block;
      }

      &__sub {
        @include core.body-text-sm-regular;

        display: block;
        margin-top: core.$pixel-2;
        margin-bottom: core.$pixel-2;
      }

      &__disabled {
        display: block;
      }
    }
  }

  &--checked {
    @include core.text-color('white');
    @include core.bg-color('primary');

    &:hover {
      @include core.text-color('gray-dark');
    }
  }

  &--disabled {
    @include core.bg-color('gray-extra-light');
    @include core.text-color('gray-middle');

    cursor: default;
  }

  &--focused {
    @include core.bg-color('primary-light');
    @include core.text-color('gray-dark');
  }
}