card-control.scss

@use '../variables/color';
@use '../variables/commons';
@use '../variables/spacing';
@use '../variables/components/forms';
@use '../variables/components/form-check';
@use '../mixins/utilities' as utilities-mx;
@use '../functions/tokens';
@use '../tokens/utilities';

tokens.$default-map: utilities.$post-spacing;

/*
* There are a whole bunch of !important statments in this file.
* They are necessary and should not be removed, because we need to override the .form-check styles here.
*/
fieldset {
  .radio-button-card,
  .checkbox-button-card {
    &:not(:last-child) {
      margin-bottom: tokens.get('utility-gap-16');
    }
  }
}

.radio-button-card,
.checkbox-button-card {
  --post-card-control-border-color: #{color.$gray-60};
  --post-card-control-bg: #{color.$white};
  --post-card-control-color: #{color.$gray-80};
  --post-card-control-input-border-color: #{color.$gray-80};
  --post-card-control-input-bg: #{color.$white};

  display: grid;
  grid-template: 'input label icon' 'input content content' / min-content auto min-content;
  align-items: center;
  gap: 0 tokens.get('utility-gap-8');
  position: relative;
  padding: tokens.get('utility-gap-16');
  width: 100%;
  background-color: var(--post-card-control-bg);
  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
  border-radius: commons.$border-radius;
  color: var(--post-card-control-color);
  cursor: pointer;

  > input {
    grid-area: input;
    position: relative;
    z-index: 2;
    margin: tokens.get('utility-gap-4') 0;
    background-color: var(--post-card-control-input-bg) !important;
    border-color: var(--post-card-control-input-border-color) !important;
    color: var(--post-card-control-input-border-color) !important;
    cursor: inherit;
    transition: none;

    @include utilities-mx.focus-style-none();

    &:hover:not([disabled]) ~ label {
      color: color.$black;
      background-color: transparent !important;
    }

    &:focus,
    &:focus-visible {
      box-shadow: none;
    }

    ~ label {
      color: inherit !important;
    }
  }

  label {
    grid-area: label;
    margin: tokens.get('utility-gap-4') 0;
    padding: 0;
    border-radius: inherit;
    transition: none;

    &::before {
      display: block;
      content: '';
      position: absolute;
      inset: calc(tokens.get('utility-gap-2') * -1);
      border-radius: inherit;
    }

    > * {
      display: block;
      // Lift content above the :before element to make it selectable
      position: relative;
      z-index: 2;
    }

    &:not(:has(+ post-icon)) {
      grid-area: 1 / label / 1 / icon;
    }
  }

  .card-control--content {
    grid-area: content;
  }

  post-icon {
    grid-area: icon;
    width: tokens.get('utility-gap-32');
    height: tokens.get('utility-gap-32');
    pointer-events: none;
  }

  &:where(:not(:has(input:disabled)), :not(.disabled)) {
    &:where(:has(input:checked), .checked) {
      --post-card-control-border-color: #{color.$black};
      --post-card-control-bg: #{color.$yellow};
    }

    &:where(:has(input:invalid), :has(input[aria-invalid]), :has(input.is-invalid), .is-invalid) {
      --post-card-control-border-color: #{color.$error};
      --post-card-control-color: #{color.$error};
      --post-card-control-input-border-color: #{color.$error};
    }

    &:where(:hover) {
      --post-card-control-border-color: #{color.$gray-80};
      --post-card-control-bg: #{color.$gray-60};
      --post-card-control-color: #{color.$white};
      --post-card-control-input-border-color: #{color.$black};
    }

    input:focus-visible ~ label::before {
      outline-offset: forms.$input-focus-outline-thickness;
      outline: forms.$input-focus-outline-thickness solid commons.$outline-color;
    }
  }

  &:where(:has(input:disabled), .disabled) {
    --post-card-control-border-color: #{color.$gray-60};
    --post-card-control-bg: transparent;
    --post-card-control-color: #{color.$gray-60};
    --post-card-control-input-border-color: #{color.$gray-60};
    --post-card-control-input-bg: transparent;

    border-style: dashed;
    cursor: default;

    input.form-check-input[type] {
      padding: forms.$input-border-width;
    }
  }

  @include utilities-mx.high-contrast-mode() {
    --post-card-control-border-color: FieldText;
    --post-card-control-bg: Field;
    --post-card-control-color: FieldText;
    --post-card-control-input-border-color: FieldText;
    --post-card-control-input-bg: Field;

    outline: tokens.get('utility-gap-2') solid Field;
    outline-offset: calc(tokens.get('utility-gap-2') * -2);

    input.form-check-input[type] {
      outline: tokens.get('utility-gap-2') solid Field;
      background-color: Field !important;

      &::after {
        border-color: Field !important;
      }
    }

    label.form-check-label,
    .card-control--content {
      background-color: var(--post-card-control-bg) !important;
    }

    &:where(:not(:has(input:disabled)), :not(.disabled)) {
      &:where(:has(input:checked), .checked) {
        --post-card-control-border-color: FieldText;
        --post-card-control-bg: SelectedItem;
        --post-card-control-color: FieldText;
        --post-card-control-input-border-color: FieldText;

        input.form-check-input[type] {
          &::after {
            background-color: FieldText !important;
          }
        }
      }

      &:where(:hover) {
        --post-card-control-border-color: Highlight;
        --post-card-control-bg: Field;
        --post-card-control-color: FieldText;
        --post-card-control-input-border-color: Highlight;
      }
    }

    &:where(:has(input:disabled), .disabled) {
      --post-card-control-border-color: GrayText;
      --post-card-control-bg: Field;
      --post-card-control-color: FieldText;
      --post-card-control-input-border-color: GrayText;
      --post-card-control-input-bg: Field;

      &:where(:has(input:checked), .checked) {
        --post-card-control-bg: SelectedItem;
        --post-card-control-color: SelectedItemText;

        position: relative;
        background-color: Field;

        &::before {
          display: block;
          content: '';
          position: absolute;
          inset: tokens.get('utility-gap-2');
          background-color: SelectedItem;
          z-index: 1;
        }

        > * {
          position: relative;
          z-index: 2;
        }

        input.form-check-input[type] {
          &::after {
            background-color: FieldText !important;
          }
        }
      }
    }
  }
}

@each $bg in color.$dark-backgrounds {
  #{$bg} {
    .radio-button-card,
    .checkbox-button-card {
      --post-card-control-border-color: #{color.$white};
      --post-card-control-bg: transparent;
      --post-card-control-color: #{color.$white};
      --post-card-control-input-border-color: #{color.$white};
      --post-card-control-input-bg: transparent;

      &:where(:not(:has(input:disabled)), :not(.disabled)) {
        &:where(:has(input:checked), .checked) {
          --post-card-control-border-color: #{color.$yellow};
          --post-card-control-bg: #{color.$yellow};
          --post-card-control-color: #{color.$gray-80};
          --post-card-control-input-border-color: #{color.$gray-80};
          --post-card-control-input-bg: #{color.$white};
        }

        &:where(
            :has(input:invalid),
            :has(input[aria-invalid]),
            :has(input.is-invalid),
            .is-invalid
          ) {
          --post-card-control-border-color: #{color.$error};
          --post-card-control-bg: #{color.$error-background};
          --post-card-control-color: #{color.$error};
          --post-card-control-input-border-color: #{color.$error};
          --post-card-control-input-bg: #{color.$white};

          &:where(:has(input:checked), .checked) {
            --post-card-control-bg: #{color.$yellow};
          }
        }

        &:where(:hover) {
          --post-card-control-border-color: #{color.$black};
          --post-card-control-bg: #{color.$gray-20};
          --post-card-control-color: #{color.$black};
          --post-card-control-input-border-color: #{color.$black};
          --post-card-control-input-bg: #{color.$white};
        }

        input:focus-visible ~ label::before {
          outline-color: color.$white;
        }
      }

      &:where(:has(input:disabled), .disabled) {
        --post-card-control-border-color: color.$white-alpha-80;
        --post-card-control-bg: transparent;
        --post-card-control-color: color.$white-alpha-80;
        --post-card-control-input-border-color: color.$white-alpha-80;
        --post-card-control-input-bg: transparent;
      }

      @include utilities-mx.high-contrast-mode() {
        --post-card-control-border-color: FieldText;
        --post-card-control-bg: Field;
        --post-card-control-color: FieldText;
        --post-card-control-input-border-color: FieldText;
        --post-card-control-input-bg: Field;

        &:where(:not(:has(input:disabled)), :not(.disabled)) {
          &:where(:has(input:checked), .checked) {
            --post-card-control-border-color: FieldText;
            --post-card-control-bg: SelectedItem;
            --post-card-control-color: SelectedItemText;
            --post-card-control-input-border-color: FieldText;
          }

          &:where(:hover) {
            --post-card-control-border-color: Highlight;
            --post-card-control-bg: Field;
            --post-card-control-color: FieldText;
            --post-card-control-input-border-color: Highlight;
          }
        }

        &:where(:has(input:disabled), .disabled) {
          --post-card-control-border-color: GrayText;
          --post-card-control-bg: Field;
          --post-card-control-color: FieldText;
          --post-card-control-input-border-color: GrayText;
          --post-card-control-input-bg: Field;

          &:where(:has(input:checked), .checked) {
            --post-card-control-bg: SelectedItem;
            --post-card-control-color: SelectedItemText;
          }
        }
      }
    }
  }
}