@qite/tide-components 1.0.1

package/styles/components/_radiobutton.scss

@@ -0,0 +1,170 @@
+.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;
+    }
+  }
+}