.radio-btn {
  position: relative;
  height: 100%;
}

/* Native radio button */
.radio-btn__input-native {
  margin: auto 1rem;
  width: 20px;
  height: 20px;
  accent-color: $primary;
  cursor: pointer;

  /* Only show focus highlight if not selected */
  &:focus:not(:checked) + .radio-btn__label {
    background-color: #f2f2f2;
  }

  /* Main selected state styling */
  &:checked + .radio-btn__label {
    border-color: $primary;
    background-color: $primary;

    .radio-btn__icon {
      stroke: $white;
    }

    .radio-btn__title,
    .radio-btn__text {
      color: $white;
    }
  }
}

/* Label block that displays the content */
.radio-btn__label {
  display: block;
  width: 100%;
  height: 100%;
  padding: 2rem 2rem 2rem 5.4rem;

  border: 1px solid #f2f2f2;
  border-radius: 5px;
  cursor: pointer;

  transition: background-color 0.1s linear, border-color 0.1s linear;

  &:hover {
    background-color: #f2f2f2;
  }

  &--flex {
    display: flex;
    align-items: center;
  }
}

/* Icon styling inside label */
.radio-btn__icon {
  width: 2.2rem;
  height: 2.2rem;

  stroke: $dark;

  position: absolute;
  left: 5.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* Text inside label */
.radio-btn__title {
  font-size: 1.5rem;
  color: $dark;
}

.radio-btn__text {
  font-size: 1.1rem;
  color: #606060;
}

.radio-btn__text_label {
  background-color: #273276;
  position: absolute;
  color: #ffffff;
  font-size: 14px;
  top: -17px;
  right: -15px;
  float: right;
  padding: 3px 10px;
  margin: 8px;
  border-radius: 3px;
}