.radiobutton {
  position: relative;
  @include row;
  align-items: flex-start;
  justify-content: flex-start;
  font-family: var(--tide-booking-radiobutton-font-family);
  user-select: none;
  color: var(--tide-booking-radiobutton-color-text);
  @extend %transition-easing;
  cursor: pointer;

  &:hover,
  &:focus,
  &:active {
    color: var(--tide-booking-radiobutton-color-text);
  }

  & + & {
    margin-top: 10px;
  }

  &-group {
    @include row--md;
    gap: 10px;

    .radiobutton {
      margin-right: 15px * 2;

      & + .radiobutton {
        margin-top: 0;
      }
    }
  }

  // &-group--pricings {
  //   @include media-md {
  //     flex-direction: column;
  //   }

  //   .radiobutton {
  //     padding: 15px;
  //     margin-right: 0;
  //     margin-bottom: 10px;
  //     align-items: center;
  //     border-radius: 5px;
  //     border: 1px solid $bg-secondary;
  //   }

  //   .radiobutton--selected {
  //     background-color: fade-out($bg-secondary, 0.15);
  //   }

  //   .radiobutton__input {
  //     position: relative;
  //     left: 0;
  //     margin: 0 10px 0 0;
  //   }

  //   .radiobutton__label {
  //     width: 100%;
  //     padding: 0;
  //     display: flex;
  //     align-items: center;
  //   }

  //   .radiobutton__label-text {
  //     @extend h5;
  //     margin: 0;
  //     color: $black;
  //   }
  // }

  &__label {
    display: flex;
    align-items: center;
    line-height: 1;
    cursor: pointer;
  }

  &__label-header {
    width: 100%;
    display: flex;
  }

  &__input {
    position: relative;
    width: 22px;
    height: 22px;
    min-height: auto;
    // top: 0;
    // left: 0;
    padding: 0;
    margin-right: 10px;
    margin-left: 0;
    @include flex--centerXY;
    border-radius: 50%;
    border: var(--tide-booking-radiobutton-border);
    background: var(--tide-booking-radiobutton-background);
    transition: border-color ease-out 0.2s;
    appearance: none;

    &:checked {
      border: var(--tide-booking-radiobutton-input-checked-border);
      background: var(--tide-booking-radiobutton-input-checked-background);

      &:after {
        opacity: 1;
        visibility: visible;
      }
    }

    &:after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      opacity: 0;
      visibility: hidden;
      border-radius: 50%;
      background: var(--tide-booking-radiobutton-input-checked-after-color);
      @include transitionEasing($duration: 0.2s);
    }
  }

  &__value {
    padding-left: 10px;
    margin-left: auto;
    font-style: normal;
    text-align: right;
    white-space: nowrap;
    @include transitionEasing($duration: 0.2s);
  }

  &--label {
    cursor: default;

    .radiobutton__input {
      border: none;
      background-color: transparent;
      cursor: default;
      appearance: none;
    }

    .radiobutton__label {
      cursor: default;
    }
  }

  &--package-label {
    padding-top: 15px !important;

    @include media-xl {
      padding-top: 20px !important;
    }
  }
}

.form {
  &__region-header .radiobutton {
    margin-top: -5px;
    margin-left: auto;
    margin-bottom: 15px;
    white-space: nowrap;

    @include media-xs {
      margin-bottom: initial;
      margin-left: auto;
    }
  }
}