/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

//
// FORM > RADIO-CARD
//

// RadioCard Group

.hds-form-group--radio-cards {
  .hds-form-group__control-fields-wrapper {
    margin: calc(-1 * var(--token-form-radiocard-group-gap) / 2);
  }

  .hds-form-group__legend {
    margin-bottom: 12px;
  }

  .hds-form-radio-card {
    margin: calc(var(--token-form-radiocard-group-gap) / 2);
  }

  .hds-form-radio-card--has-fluid-width {
    flex: 1 0 0;
  }

  .hds-form-radio-card--has-fixed-width {
    flex: 1 0 100%;
  }
}

// RadioCard

.hds-form-radio-card {
  display: flex;
  flex-direction: column;
  background-color: var(--token-color-surface-primary);
  border: var(--token-form-radiocard-border-width) solid var(--token-color-border-primary);
  border-radius: var(--token-form-radiocard-border-radius);
  box-shadow: var(--token-elevation-mid-box-shadow);
  cursor: pointer;

  // prevent focus on the form control as it is handled at the card level
  .hds-form-radio-card__control {
    outline-color: transparent;
  }

  // STATES

  &:hover,
  &.mock-hover {
    box-shadow: var(--token-elevation-high-box-shadow);
    transition: var(--token-form-radiocard-transition-duration);
  }

  &:focus-within,
  &.mock-focus {
    border-color: var(--token-color-focus-action-internal);
    box-shadow: 0 0 0 3px var(--token-color-focus-action-external);
  }

  &--checked,
  &.mock-checked {
    border-color: var(--token-color-palette-blue-300);

    .hds-form-radio-card__control-wrapper {
      background-color: var(--token-color-surface-action);
      border-color: var(--token-color-border-action);
    }

    &:hover,
    &.mock-hover {
      border-color: var(--token-color-palette-blue-400);
    }
  }

  &--disabled,
  &.mock-disabled {
    background-color: var(--token-color-surface-interactive-disabled);
    border-color: var(--token-color-border-primary);
    box-shadow: none;
    cursor: not-allowed;

    .hds-form-radio-card__control-wrapper {
      background-color: var(--token-color-surface-interactive-disabled);
      border-color: var(--token-color-border-primary);
    }

    .hds-form-radio-card__content {
      opacity: 0.5;
    }
  }
}

// ALIGNMENT

.hds-form-radio-card--align-left {
  text-align: left;
}

.hds-form-radio-card--align-center {
  text-align: center;

  // stylelint-disable-next-line selector-class-pattern
  .hds-icon {
    margin: auto;
  }
}

// CONTROL POSITION

.hds-form-radio-card--control-bottom {
  .hds-form-radio-card__control-wrapper {
    border-top-width: var(--token-form-radiocard-border-width);
    border-top-style: solid;
    border-bottom-right-radius: inherit;
    border-bottom-left-radius: inherit;
  }
}

.hds-form-radio-card--control-left {
  flex-direction: row-reverse;

  .hds-form-radio-card__control-wrapper {
    display: flex;
    align-items: center;
    border-right-width: var(--token-form-radiocard-border-width);
    border-right-style: solid;
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
  }
}

.hds-form-radio-card__content {
  flex: 1;
  padding: var(--token-form-radiocard-content-padding);

  .hds-badge {
    margin-bottom: 12px;
  }
}

.hds-form-radio-card__label {
  display: block;
  margin: 8px 0;
  color: var(--token-form-label-color);
  overflow-wrap: break-word;

  &:first-child {
    margin-top: 0;
  }
}

.hds-form-radio-card__description {
  display: block;
  color: var(--token-color-foreground-primary);
}

.hds-form-radio-card__control-wrapper {
  padding: var(--token-form-radiocard-control-padding);
  background-color: var(--token-color-surface-faint);
  border-color: var(--token-color-border-primary);
}

.hds-form-radio-card__control {
  display: block;
  margin: auto;
}