radio-button-grid.component.scss

// @use "/src/theme/mixins";

$background-selected: var(
  --radio-group-background-selected,
  var(--gradient-primary-light-vertical)
);
$border: var(--border-standard);
$border-radius: var(--ion-border-radius-standard);
$text-size: var(--radio-button-font-size, 1.25rem);
$text-color: var(--radio-button-font-color, var(--ion-color-primary));

.radio-grid {
  display: grid;
}
.item {
  border: $border;
  border-radius: 15px;
  text-align: center;
  padding: 8px;
  background: white;
  cursor: pointer;
  box-shadow: var(--ion-default-box-shadow);
}
.item[data-selected="true"] {
  background: $background-selected;
}
.item-text {
  font-size: $text-size;
  color: $text-color;
}

.radio-grid[data-variant="circle-icon"] {
  display: grid;

  .item {
    border: none;
    padding: 0px;
    box-shadow: none;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: transparent;
  }
  .item-image-container {
    background: var(--ion-color-primary-50);
    border: 1px solid var(--ion-color-primary-200);
    border-radius: 50%;

    width: 86px;
    height: 86px;

    padding: 16px;

    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 48px;
    }
  }
  .item-text {
    font-size: large;
    color: var(--ion-color-gray-800);
    margin-top: 6px;
  }

  .item[data-selected="true"] {
    background: unset;
    .item-image-container {
      border: 2px solid var(--ion-color-primary-300);
      background: var(--ion-color-primary-200);
    }
    .item-text {
      font-weight: bold;
    }
  }
}