@import '../shared/cards.module.scss';

$border-style: 1px solid color('neutral-5');

.radio-card {
  display: block;
  width: 100%;
  height: 100%;
  color: color('primary-3');
}

.card {
  @extend %card;

  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: ru(1);
  padding-bottom: ru(1);
  height: 100%;
  cursor: pointer;
  text-align: center;
}

.checked {
  color: color('primary-3');

  svg path {
    fill: color('primary-3');
  }

  .sections {
    color: color('primary-3');
  }
}

.not-selected {
  color: color('neutral-4');

  svg path {
    fill: color('neutral-4');
  }

  .sections {
    color: color('neutral-4');
  }
}

.content {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}

.radio-field {
  margin-bottom: ru(.75);

  &:before {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
}

.label {
  &:after {
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
  }
}

.title {
  @include typography-a-7-bold;
  font-weight: 600;
  margin: 0 0 ru(.75);
  color: inherit;
}

.description {
  @include typography-b-10;

  color: inherit;
  margin-top: 0;
  margin-bottom: ru(.25);
}

.image-wrapper {
  margin-top: ru(.5);
  margin-bottom: ru(-1);
}

.image {
  margin: auto auto ru(-.5);
}

.sections {
  @include typography-b-10;

  display: flex;

  border-top: $border-style;
  color: color('primary-3');

  line-height: ru(.75);
  text-align: center;

  margin-top: ru(.5);
  margin-bottom: ru(-1);

  &-item {
    flex: 1 1;

    margin: 0;
    padding: ru(.75);

    text-align: left;
  }

  &-label {
    @include typography-label;
  }

  &-value {
    @include typography-b-8;

    margin: 0;
  }

  &-item + &-item {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    border-left: $border-style;
  }
}

@media #{$medium-up} {
  .sections-item {
    text-align: center;
  }

  .title {
    padding: 0 ru(.5);
  }

  .description {
    padding: 0 ru(.5);
  }
}

@media #{$small-only} {
  .card {
    flex-direction: row;
    padding: ru(.5);
    text-align: left;
    flex-wrap: nowrap;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .radio-field {
    margin: 0;
  }

  .content {
    margin-left: ru(.5);
    margin-right: ru(.5);
    width: auto;
  }

  .title {
    @include typography-a-8-bold;

    margin: 0;
    color: inherit;
  }

  .description {
    @include typography-7;

    margin: 0;
    line-height: ru(.75);
    color: inherit;
  }

  .icon {
    margin: auto;
  }

  .image-wrapper {
    margin-top: 0;
    margin-bottom: 0;
  }

  .image {
    margin: auto;
    max-width: ru(3.5);
  }

  .sectioned {
    text-align: left;

    .card { padding: 0 0 0 ru(.5); }

    .title,
    .description {
      margin: ru(.5);
    }

    .title + .description {
      margin-top: ru(-.5);
    }

    .content {
      flex: 1 0;
      margin-left: 0;
      margin-right: 0;
      border-left: $border-style;
    }
  }

  .sections { margin: 0; }
  .sections-item { padding: ru(.5); }
}