v1.14.6/ui/app/styles/components/radio-card.scss

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

.radio-card-selector {
  display: flex;
  margin-bottom: $spacing-xs;
}
.radio-card {
  box-shadow: $box-shadow-low;
  flex: 1 1 25%;
  flex-direction: column;
  justify-content: space-between;
  margin: $spacing-xs $spacing-m;
  border: $base-border;
  border-radius: $radius;
  transition: all ease-in-out $speed;
  max-width: 60%;
  input[type='radio'] {
    position: absolute;
    z-index: 1;
    opacity: 0;
  }

  input[type='radio'] + span.dot {
    border: 1px solid $grey-light;
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 1rem;
    width: 1rem;
    flex-shrink: 0;
    flex-grow: 0;
  }

  input[type='radio']:checked + span.dot {
    background: $blue;
    border: 1px solid $blue;
    box-shadow: inset 0 0 0 0.15rem $white;
  }
  input[type='radio']:focus + span.dot {
    box-shadow: 0 0 10px 1px rgba($blue, 0.4), inset 0 0 0 0.15rem $white;
  }

  &.is-disabled {
    opacity: 0.6;
    box-shadow: none;
  }

  &.has-fixed-width {
    width: 368px;
    max-width: 368px;
  }
}
.radio-card:first-child {
  margin-left: 0;
}
.radio-card:last-child {
  margin-right: 0;
}
.radio-card-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.radio-card-row {
  display: flex;
  flex: 1;
  padding: $spacing-m;
}
.radio-card-icon {
  color: $ui-gray-300;
}
.radio-card-message {
  margin: $spacing-xxs;
}

.radio-card-message-title {
  font-weight: $font-weight-semibold;
  font-size: $size-7;
  margin-bottom: $spacing-xxs;
}
.radio-card-message-body {
  line-height: 1.2;
  color: $ui-gray-500;
  font-size: $size-8;
}

.radio-card-radio-row {
  display: flex;
  justify-content: center;
  background: $ui-gray-050;
  padding: $spacing-xs;
}

.is-selected {
  &.radio-card {
    border-color: $blue-500;
    background: $ui-gray-010;
    box-shadow: $box-shadow-middle;
  }
  .radio-card-icon {
    color: $black;
  }
  .radio-card-radio-row {
    background: $blue-050;
  }
}