@import "./form";

.cobalt-radio-with-details {
  $self: &;

  display: inline-block;
  flex-grow: 1;

  --visual-radio-size: 18px;

  .cobalt-radio-with-details__inner {
    @apply c-border c-border-base c-rounded-lg c-text-base c-bg-secondary c-state-interactive c-transition-colors;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    padding: spacing(sm);

    cursor: pointer;

    gap: spacing(xs);
  }

  .cobalt-radio-with-details__icon {
    flex-shrink: 0;
    margin: 0;
  }

  .cobalt-radio-with-details__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex-grow: 1;
  }

  .cobalt-radio-with-details__title {
    @apply c-text-base;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
  }

  .cobalt-radio-with-details__description {
    @apply c-text-subdued;
    font-family: font-family(base);
    font-size: 14px;
    line-height: 20px;
  }

  .cobalt-radio-with-details__input {
    @apply c-sr-only;

    // https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
    white-space: nowrap;

    & + #{ $self }__inner #{ $self }__visual-input {
      @apply c-border-accent c-border-2;
      position: relative;
      top: 3px;

      display: flex;

      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      width: var(--visual-radio-size);
      height: var(--visual-radio-size);

      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);

      @apply c-rounded-full;
      cursor: pointer;
    }

    &:focus-visible + #{ $self }__inner {
      @include semantic-color(stroke, accentAlt, outline-color);
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.3);
      outline-style: dashed;
      outline-width: 1px;
    }

    &:checked + #{ $self }__inner {
      @apply c-border c-border-accent c-text-accentAlt c-bg-accentAlt c-state-interactive c-transition-interactive;
    }

    &:checked + #{ $self }__inner .cobalt-Icon {
      @include fill-color(accent);
    }

    &:checked + #{ $self }__inner #{ $self }__visual-input {
      @include semantic-color(icon, accentAlt, border-color);
    }

    &:checked + #{ $self }__inner #{ $self }__title,
    &:checked + #{ $self }__inner #{ $self }__description {
      @apply c-text-accentAlt;
    }

    & + #{ $self }__inner #{ $self }__visual-input::after {
      @apply c-border c-border-accent c-bg-accentAlt;
      left: 2px;
      top: 2px;

      // Execption for radio inputs
      border-width: 5px;

      @apply c-rounded-full;
      content: "";
      opacity: 0;

      transition: transform 120ms ease-in-out;
      transform: scale(0.4);
      will-change: transform;
    }

    &:checked + #{ $self }__inner #{ $self }__visual-input::after {
      @include semantic-color(icon, accentAlt, border-color);

      opacity: 1;

      transform: scale(1);
    }

    &[disabled] + #{ $self }__inner {
      @apply c-state-none;
      opacity: 0.7;
      cursor: not-allowed;
    }
  }

  &.cobalt-radio-with-details--noDescription {
    .cobalt-radio-with-details__inner {
      align-items: center !important;

      .cobalt-radio-with-details__visual-input {
        top: 0 !important;
      }
    }
  }
}