@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  width: 860px;
  margin: 40px auto;
}

.cards {
  :global {
    .radio-group[direction='row'] label.radio {
      margin-right: 12px;
    }

    label.radio {
      width: 130px;
      height: 130px;
      border-radius: $border-radius;
      border: solid 1px $border-color;
      background-color: $white;
      transition: all $trans-speed ease-in-out;

      &::before,
      &::after {
        display: none;
      }

      &.checked,
      &:hover {
        border: solid 1px $dark-color01;
        box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2);

        .icon svg {
          color: $primary;
          fill: $green-color02;
        }
      }

      .label-value {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        top: 0%;
        left: 0;
        height: 100%;
        width: 100%;
        padding: 25px 12px;
        @include TypographyTitleH5($dark-color07);

        .icon {
          margin-bottom: 12px;
        }
      }
    }
  }
}
