@use "./mixins";

@layer components {
  .selection-tile {
    @include mixins.selection-tile-base;

    &__control {
      @include mixins.selection-tile-control;
    }
    &__body {
      @include mixins.selection-tile-body;
    }

    &:has(input:hover) {
      @include mixins.selection-tile-hover;
    }
    &:has(input:focus-visible) {
      @include mixins.selection-tile-focus;
    }
    &:has(input:checked) {
      @include mixins.selection-tile-selected;
    }

    &--warning {
      @include mixins.selection-tile-warning;
    }
    &--error,
    &--invalid {
      @include mixins.selection-tile-error;
    }

    &:has(input:disabled) {
      @include mixins.selection-tile-disabled;

      input:disabled {
        cursor: default;
      }

      input:disabled:not(:checked) + .checkbox-display,
      input:disabled:not(:checked) + .radio-display {
        @include mixins.selection-tile-disabled-control;
      }
    }

    .expander,
    .block-action__override {
      @include mixins.selection-tile-interactive;
    }
    .message {
      @include mixins.selection-tile-message;
    }

    .expander__summary,
    .expander__summary--opened {
      @include mixins.selection-tile-expander-summary;
    }
  }
}