@qite/tide-booking-component 1.2.3 → 1.2.5

package/styles/components/_form.scss

@@ -1,136 +1,1583 @@
-.form {
-  @extend %reset;
-
-  &__label {
-    @extend %reset;
-    margin-bottom: 15px * 0.5;
-    display: flex;
-    text-align: left;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  &__input {
-    width: 100%;
-    border: 1.5px solid var(--tide-booking-gray--medium-light);
-    background-color: var(--tide-booking-gray-xlight);
-    box-sizing: border-box;
-    @extend %transition-easing;
-  }
-
-  &__group {
-    @extend %reset;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-
-    &-input {
-      position: relative;
-      width: 100%;
-    }
-
-    &--icon {
-      &:focus,
-      &:focus-within,
-      &:active {
-        .icon {
-          svg {
-            fill: var(--tide-booking-color-secondary);
-          }
-        }
-      }
-
-      .form {
-        &__label {
-          position: absolute;
-          top: 3px;
-          left: 47.5px;
-          font-size: 14px;
-          pointer-events: none;
-          color: var(--tide-booking-datepicker-input-label-color);
-
-          @include media-sm {
-            left: 17.5px;
-          }
-
-          @include media-lg {
-            font-size: 16px;
-          }
-
-          @include media-xl {
-            left: 47.5px;
-          }
-        }
-
-        &__input {
-          @include input;
-          padding-left: 20px;
-          padding-top: 16px;
-
-          @include media-sm {
-            padding-left: 20px;
-          }
-
-          @include media-md {
-            padding-left: 20px;
-          }
-
-          @include media-xl {
-            font-size: 15.5px;
-          }
-        }
-
-        .typeahead {
-          &__trigger {
-            height: 4.5rem;
-            max-height: 4.5rem;
-            padding-left: 4rem;
-            font-size: 1.6rem;
-            background-color: var(--tide-booking-white);
-
-            @include media-sm {
-              padding-left: 1rem;
-            }
-
-            @include media-md {
-              padding-left: 4rem;
-            }
-          }
-        }
-      }
-    }
-
-
-    &--datepicker {
-      .form__group-input {
-        width: 50%;
-      }
-    }
-
-    &--submit {
-      .cta {
-        width: 100%;
-        justify-content: center;
-      }
-    }
-
-    &--success-message {
-      &:before {
-        content: "";
-        width: 15px * 3.33;
-        height: 15px * 1.33;
-        border-left: 0.25rem solid var(--tide-booking-black);
-        border-bottom: 0.25rem solid var(--tide-booking-black);
-        margin: 0 auto 15px * 3 auto;
-        transform: rotate(-45deg);
-      }
-    }
-  }
-
-
-
-}
-
-
+.form {
+  @extend %reset;
+
+  &__wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 20rem;
+  }
+
+  &__label {
+    @extend %reset;
+    margin-bottom: 15px * 0.5;
+    display: flex;
+    text-align: left;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    line-height: 22px;
+  }
+
+  &__input {
+    width: 100%;
+    border: var(--tide-booking-form-input-border);
+    background: var(--tide-booking-form-input-background);
+    border-radius: var(--tide-booking-form-input-border-radius);
+    box-sizing: border-box;
+    @extend %transition-easing;
+  }
+
+  &__group {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &-input {
+      position: relative;
+      width: 100%;
+    }
+
+    &--icon {
+      &:focus,
+      &:focus-within,
+      &:active {
+        .icon {
+          svg {
+            fill: var(--tide-booking-color-secondary);
+          }
+        }
+      }
+
+      .form {
+        &__label {
+          position: absolute;
+          top: 3px;
+          left: 47.5px;
+          font-size: 14px;
+          pointer-events: none;
+          color: var(--tide-booking-datepicker-input-label-color);
+
+          @include media-sm {
+            left: 17.5px;
+          }
+
+          @include media-lg {
+            font-size: 16px;
+          }
+
+          @include media-xl {
+            left: 47.5px;
+          }
+        }
+
+        &__input {
+          @include input;
+          padding-left: 20px;
+          padding-top: 16px;
+
+          @include media-sm {
+            padding-left: 20px;
+          }
+
+          @include media-md {
+            padding-left: 20px;
+          }
+
+          @include media-xl {
+            font-size: 15.5px;
+          }
+        }
+
+        .typeahead {
+          &__trigger {
+            height: 45px;
+            max-height: 45px;
+            padding-left: 40px;
+            font-size: 16px;
+            background-color: var(--tide-booking-white);
+
+            @include media-sm {
+              padding-left: 10px;
+            }
+
+            @include media-md {
+              padding-left: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    &--datepicker {
+      .form__group-input {
+        width: 50%;
+      }
+    }
+
+    &--submit {
+      .cta {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    &--success-message {
+      &:before {
+        content: "";
+        width: 15px * 3.33;
+        height: 15px * 1.33;
+        border-left: 2.5px solid var(--tide-booking-black);
+        border-bottom: 2.5px solid var(--tide-booking-black);
+        margin: 0 auto 15px * 3 auto;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__region {
+    @extend %reset;
+
+    & + .form__region {
+      margin-top: 15px * 4;
+    }
+
+    &-header {
+      margin-bottom: 15px * 0.3;
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+    }
+
+    &-heading {
+      @include media-xs {
+        padding-right: 15px * 2;
+      }
+    }
+
+    &-label {
+      width: 100%;
+      // margin-top: -15px * 0.5;
+      order: 2;
+
+      @include media-xs {
+        width: auto;
+        margin-top: 0;
+        // @include marginLeft(15px * 0.2);
+        order: initial;
+        margin-bottom: 11px;
+      }
+    }
+
+    &--errors {
+      padding-left: 0 !important;
+      border: none !important;
+      color: var(--tide-booking-invalid);
+    }
+  }
+
+  &__twocolumn {
+    @include row--xl;
+
+    & + & {
+      margin-top: 15px;
+    }
+
+    & + .form__row {
+      margin-top: 15px;
+    }
+  }
+
+  &__twocolumn-column {
+    @include media-xl {
+      padding-right: 9px * 2;
+    }
+
+    .form__twocolumn-column + .form__twocolumn-column {
+      margin-top: 15px;
+
+      @include media-xl {
+        margin-top: 0;
+        padding-left: 9px * 2;
+        padding-right: 0;
+      }
+    }
+  }
+
+  &__row {
+    @extend %reset;
+    margin-right: -15px * 0.5;
+    margin-left: -15px * 0.5;
+    display: flex;
+    flex-wrap: wrap;
+
+    .form__group {
+      position: relative;
+      width: 100%;
+      max-width: 100%;
+      min-height: 1px;
+      padding-right: 15px * 0.5;
+      padding-left: 15px * 0.5;
+      margin-bottom: 15px;
+      @include column;
+      flex-grow: 1;
+      flex-basis: 100%;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+
+      &--10 {
+        width: 10%;
+        flex: 0 0 10%;
+      }
+
+      &--20 {
+        width: 20%;
+        flex: 0 0 20%;
+      }
+
+      &--25 {
+        width: 25%;
+        flex: 0 0 25%;
+      }
+
+      &--30 {
+        width: 30%;
+        flex: 0 0 30%;
+      }
+
+      &--33 {
+        width: 33.33%;
+        flex: 0 0 33.33%;
+      }
+
+      &--40 {
+        width: 40%;
+        flex: 0 0 40%;
+      }
+
+      &--50 {
+        width: 50%;
+        flex: 0 0 50%;
+      }
+
+      &--60 {
+        width: 60%;
+        flex: 0 0 60%;
+      }
+
+      &--66 {
+        width: 66.66%;
+        flex: 0 0 66.66%;
+      }
+
+      &--70 {
+        width: 70%;
+        flex: 0 0 70%;
+      }
+
+      &--75 {
+        width: 75%;
+        flex: 0 0 75%;
+      }
+
+      &--80 {
+        width: 80%;
+        flex: 0 0 80%;
+      }
+
+      &--90 {
+        width: 90%;
+        flex: 0 0 90%;
+      }
+
+      &--xs {
+        &-10 {
+          @include media-xs {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xs {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xs {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xs {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xs {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xs {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xs {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xs {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xs {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xs {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xs {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xs {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xs {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xs {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--sm {
+        &-10 {
+          @include media-sm {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-sm {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-sm {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-sm {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-sm {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-sm {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-sm {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-sm {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-sm {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-sm {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-sm {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-sm {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-sm {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-sm {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--md {
+        &-10 {
+          @include media-md {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-md {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-md {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-md {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-md {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-md {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-md {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-md {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-md {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-md {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-md {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-md {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-md {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-md {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--lg {
+        &-10 {
+          @include media-lg {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-lg {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-lg {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-lg {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-lg {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-lg {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-lg {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-lg {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-lg {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-lg {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-lg {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-lg {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-lg {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-lg {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--xl {
+        &-10 {
+          @include media-xl {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xl {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xl {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xl {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xl {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xl {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xl {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xl {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xl {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xl {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xl {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xl {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xl {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xl {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--xxl {
+        &-10 {
+          @include media-xxl {
+            width: 10%;
+            flex-basis: 10%;
+          }
+        }
+
+        &-20 {
+          @include media-xxl {
+            width: 20%;
+            flex-basis: 20%;
+          }
+        }
+
+        &-25 {
+          @include media-xxl {
+            width: 25%;
+            flex-basis: 25%;
+          }
+        }
+
+        &-30 {
+          @include media-xxl {
+            width: 30%;
+            flex-basis: 30%;
+          }
+        }
+
+        &-33 {
+          @include media-xxl {
+            width: 33.33%;
+            flex-basis: 33.33%;
+          }
+        }
+
+        &-40 {
+          @include media-xxl {
+            width: 40%;
+            flex-basis: 40%;
+          }
+        }
+
+        &-50 {
+          @include media-xxl {
+            width: 50%;
+            flex-basis: 50%;
+          }
+        }
+
+        &-60 {
+          @include media-xxl {
+            width: 60%;
+            flex-basis: 60%;
+          }
+        }
+
+        &-66 {
+          @include media-xxl {
+            width: 66.66%;
+            flex-basis: 66.66%;
+          }
+        }
+
+        &-70 {
+          @include media-xxl {
+            width: 70%;
+            flex-basis: 70%;
+          }
+        }
+
+        &-75 {
+          @include media-xxl {
+            width: 75%;
+            flex-basis: 75%;
+          }
+        }
+
+        &-80 {
+          @include media-xxl {
+            width: 80%;
+            flex-basis: 80%;
+          }
+        }
+
+        &-90 {
+          @include media-xxl {
+            width: 90%;
+            flex-basis: 90%;
+          }
+        }
+
+        &-100 {
+          @include media-xxl {
+            width: 100%;
+            flex-basis: 100%;
+          }
+        }
+      }
+
+      &--datepicker {
+        flex-direction: row;
+      }
+
+      &--success-message {
+        max-width: var(--tide-booking-container-article);
+        margin-right: auto;
+        margin-left: auto;
+      }
+
+      &--inline {
+        width: auto;
+        flex-grow: 0;
+        white-space: nowrap;
+      }
+    }
+
+    & + .form__row {
+      margin-top: 15px;
+    }
+
+    &--actions {
+      .form__group {
+        flex-flow: row nowrap;
+        align-items: flex-end;
+        justify-content: flex-end;
+      }
+    }
+
+    &--additional-actions {
+      .form__group {
+        @include row--sm;
+        @include flex--centerXY;
+      }
+    }
+
+    &--choose-office {
+      display: flex;
+    }
+
+    &--disclaimer {
+      width: 100%;
+    }
+
+    &--validation {
+      margin-bottom: 15px;
+      flex-direction: column;
+      color: var(--tide-booking-invalid-dark);
+
+      p {
+        opacity: 1;
+      }
+
+      ul {
+        margin-inline-start: 30px;
+        margin-top: 10px;
+      }
+
+      .form {
+        &__group {
+          flex-basis: initial;
+        }
+      }
+    }
+
+    &--inline {
+      align-items: flex-end;
+
+      .form__group {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &__group {
+    @extend %reset;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    &-input {
+      position: relative;
+      width: 100%;
+    }
+
+    .checkbox {
+      & + .checkbox {
+        margin-top: 15px;
+      }
+    }
+
+    .radiobutton {
+      & + .radiobutton {
+        margin-top: 15px;
+      }
+    }
+
+    &--error {
+      .form {
+        &__label {
+          color: var(--tide-booking-invalid);
+        }
+
+        &__input {
+          border-color: var(--tide-booking-invalid-light);
+          color: var(--tide-booking-invalid-dark);
+          background: var(--tide-booking-invalid-light);
+        }
+      }
+
+      .radiobutton {
+        &__label {
+          color: var(--tide-booking-invalid-dark);
+        }
+
+        &__input {
+          border: 2px solid var(--tide-booking-invalid-dark);
+          background: var(--tide-booking-invalid-light);
+
+          &:after {
+            background: var(--tide-booking-invalid-dark);
+          }
+        }
+      }
+
+      ::-webkit-input-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      ::-moz-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      :-ms-input-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+
+      :-moz-placeholder {
+        color: var(--tide-booking-invalid-dark);
+      }
+    }
+
+    &--icon {
+      &:focus,
+      &:focus-within,
+      &:active {
+        .icon {
+          svg {
+            fill: var(--tide-booking-color-secondary);
+          }
+        }
+      }
+
+      .form {
+        &__label {
+          position: absolute;
+          top: 3px;
+          left: 47.5px;
+          font-size: 13px;
+          pointer-events: none;
+
+          @include media-sm {
+            left: 17.5px;
+          }
+
+          @include media-xl {
+            left: 47.5px;
+          }
+        }
+
+        &__input {
+          height: 45px;
+          max-height: 45px;
+          padding-left: 20px;
+          padding-top: 16px;
+          font-size: 14.5px;
+          background-color: white;
+
+          @include media-sm {
+            padding-left: 20px;
+          }
+
+          @include media-md {
+            padding-left: 20px;
+          }
+
+          @include media-xl {
+            font-size: 15.5px;
+          }
+        }
+
+        .typeahead {
+          &__trigger {
+            height: 45px;
+            max-height: 45px;
+            padding-left: 40px;
+            font-size: 16px;
+            background-color: white;
+
+            @include media-sm {
+              padding-left: 10px;
+            }
+
+            @include media-md {
+              padding-left: 40px;
+            }
+          }
+        }
+      }
+    }
+
+    &--datepicker {
+      .form__group-input {
+        width: 50%;
+      }
+
+      .form__group-input:nth-child(1) .form__input {
+        border-radius: 5px 0 0 5px;
+      }
+
+      .form__group-input:nth-child(2) .form__input {
+        border-radius: 0 5px 5px 0;
+      }
+    }
+
+    &--submit {
+      .cta {
+        width: 100%;
+        justify-content: center;
+      }
+    }
+
+    &--success-message {
+      &:before {
+        content: "";
+        width: 15px * 3.33;
+        height: 15px * 1.33;
+        border-left: 2.5px solid black;
+        border-bottom: 2.5px solid black;
+        margin: 0 auto 15px * 3 auto;
+        transform: rotate(-45deg);
+      }
+    }
+  }
+
+  &__error-heading {
+    font-family: var(--tide-booking-font-heading);
+  }
+
+  &__room {
+    display: grid;
+    grid-template-rows: repeat(1, 1fr);
+    gap: 15px;
+    padding: 15px;
+    background: var(--tide-booking-room-options-card-background);
+    outline: var(--tide-booking-room-options-card-border);
+    border-radius: var(--tide-booking-room-options-card-border-radius);
+
+    @include media-md {
+      gap: 25px;
+      grid-template-columns: 75% 20%;
+      justify-content: space-between;
+    }
+
+    &__container {
+      margin-top: -25px;
+    }
+
+    &__header {
+      @include h3;
+      color: #666;
+    }
+
+    &__wrapper {
+      display: grid;
+      grid-template-columns: repeat(1, 1fr);
+      grid-template-rows: repeat(1, 1fr);
+      gap: 15px;
+
+      @include media-sm {
+        gap: 25px;
+        grid-template-columns: 230px 1fr;
+      }
+    }
+
+    &__image {
+      width: 100%;
+      height: 230px;
+      object-fit: cover;
+      overflow: hidden;
+      border-radius: var(--tide-booking-room-options-image-border-radius);
+      position: relative;
+    }
+
+    &__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      object-position: center;
+    }
+
+    &__favorite {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: white;
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      color: #26b489;
+      font-size: 20px;
+    }
+
+    &__footer {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      align-items: flex-end;
+      gap: 10px;
+
+      @include media-xs {
+        flex-direction: row;
+      }
+
+      @include media-md {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+      }
+
+      p {
+        margin-bottom: 0;
+        font-size: 14px;
+        padding-bottom: 2px;
+
+        @include media-md {
+          font-size: 16px;
+          text-align: right;
+        }
+      }
+
+      &__top {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 5px;
+        width: 100%;
+
+        @include media-md {
+          align-items: flex-end;
+        }
+      }
+
+      &__bottom {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 5px;
+        width: 100%;
+        max-width: 230px;
+      }
+
+      .cta {
+        width: 100%;
+        max-width: 230px;
+        justify-content: center;
+      }
+    }
+
+    &__title {
+      font-family: var(--tide-booking-room-options-title-font-family);
+      font-weight: var(--tide-booking-room-options-title-font-weight);
+      color: var(--tide-booking-room-options-title-color);
+      margin-bottom: 5px;
+    }
+
+    &__text {
+      font-size: 14px;
+      line-height: 18px;
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
+
+    &__days {
+      font-size: 14px;
+      @include media-md {
+        font-size: 16px;
+        text-align: right;
+      }
+    }
+
+    &__usps {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      flex-wrap: wrap;
+      gap: 10px;
+      row-gap: 0rem;
+      margin: 0;
+    }
+
+    &__select {
+      display: grid;
+      grid-template-rows: repeat(1, 1fr);
+      gap: 10px;
+      margin-top: 15px;
+
+      @include media-md {
+        grid-template-columns: repeat(2, 1fr);
+        gap: 15px;
+      }
+    }
+
+    &__price {
+      font-size: 16px;
+      font-weight: 400;
+      margin-bottom: 5px;
+
+      span {
+        font-size: 20px;
+        font-weight: 400;
+      }
+
+      &--increase {
+        color: var(--tide-booking-price-increase);
+      }
+
+      &--decrease {
+        color: var(--tide-booking-price-decrease);
+      }
+    }
+
+    &__alternatives {
+      &__header {
+        margin: 30px 0rem 10px 0rem;
+        @include h6;
+        color: var(--tide-booking-room-options-alternative-header-color);
+        font-size: 16px;
+
+        @include media-xl {
+          font-size: 18px;
+        }
+      }
+
+      &__btn {
+        margin-bottom: 5px;
+        outline: none;
+        border: none;
+        background: transparent;
+        text-align: right;
+        color: var(--tide-booking-room-options-alternative-btn-color);
+        text-decoration: var(
+          --tide-booking-room-options-alternative-btn-text-decoration
+        );
+        transition: color 0.3s ease, text-decoration 0.3s ease;
+
+        &:hover {
+          text-decoration: var(
+            --tide-booking-room-options-alternative-btn-text-decoration-hover
+          );
+          color: var(--tide-booking-room-options-alternative-btn-color-hover);
+        }
+      }
+
+      &__content {
+        display: grid;
+        grid-template-columns: repeat(1, 1fr);
+        grid-template-rows: repeat(1, 1fr);
+        gap: 15px;
+
+        @include media-sm {
+          grid-template-columns: repeat(2, 1fr);
+        }
+
+        @include media-xxl {
+          grid-template-columns: repeat(3, 1fr);
+        }
+
+        .form__room {
+          @include media-md {
+            display: grid;
+            grid-template-rows: repeat(1, 1fr);
+            grid-template-columns: 1fr;
+          }
+
+          &__wrapper {
+            @include media-sm {
+              display: grid;
+              grid-template-columns: repeat(1, 1fr);
+              grid-template-rows: repeat(1, 1fr);
+              gap: 15px;
+            }
+          }
+
+          &__footer {
+            @include media-md {
+              flex-direction: row;
+            }
+            &__top {
+              @include media-md {
+                align-items: flex-start;
+              }
+            }
+          }
+
+          &__dates {
+            @include media-md {
+              text-align: left;
+              font-size: 14px;
+            }
+          }
+
+          &__days {
+            @include media-md {
+              text-align: left;
+              font-size: 14px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.form__twocolumn-column + .form__twocolumn-column {
+  margin-top: 15px;
+
+  @include media-xl {
+    margin-top: 0;
+    padding-left: 9px * 2;
+    padding-right: 0;
+  }
+}
+
+.booking .form {
+  max-width: 100%;
+
+  &__region {
+    // background-color: $white;
+
+    .booking-card__body {
+      background-color: transparent;
+    }
+  }
+}
+
+.form__travelers {
+  &__wrapper {
+    background: var(--tide-booking-form-card-background);
+    outline: var(--tide-booking-form-card-border);
+    border-radius: var(--tide-booking-form-card-border-radius);
+    margin-top: -25px;
+  }
+
+  .form__region {
+    padding: 15px;
+
+    @include media-sm {
+      padding: 15px;
+    }
+
+    @include media-lg {
+      padding: 15px;
+      padding-bottom: 20px;
+    }
+
+    &-heading {
+      margin-bottom: 0px;
+    }
+
+    &-header {
+      display: flex;
+      flex-flow: row wrap;
+      align-items: center;
+      margin: 15px 0px;
+      margin-top: 5px;
+    }
+
+    &-label {
+      margin-top: 5px;
+      margin-bottom: 0;
+      font-size: 16px;
+      color: var(--tide-booking-form-card-label-color);
+
+      @include media-xs {
+        margin-top: 0px;
+      }
+    }
+  }
+
+  .form__group {
+    gap: 5px;
+    margin-bottom: 0px;
+    min-height: 85px;
+
+    .form__label {
+      color: var(--tide-booking-form-label-color);
+      font-family: var(--tide-booking-form-label-font-family);
+      font-weight: var(--tide-booking-form-label-font-weight);
+    }
+
+    &--error {
+      .form__label {
+        color: var(--tide-booking-invalid);
+      }
+    }
+
+    .form__input {
+      min-height: 45px;
+
+      &:focus,
+      &:active {
+        border: var(--tide-booking-form-input-border-focus);
+      }
+    }
+  }
+}
+
+.booking .form__region {
+  &--errors {
+    background-color: transparent;
+    padding-left: 15px !important;
+  }
+}
+
+.booking .form__region + .form__region {
+  margin-top: 0;
+  border-top: var(--tide-booking-form-group-border);
+}
+
+.booking__panel .typeahead .form__input {
+  outline: var(--tide-booking-form-typeahead-agent-border);
+  background: var(--tide-booking-form-typeahead-agent-background);
+  border-radius: var(--tide-booking-form-typeahead-agent-border-radius);
+  color: var(--tide-booking-form-typeahead-agent-color);
+}
+
+.booking__panel-frame--transparent .form__region {
+  // padding-right: 15px;
+  // padding-left: 15px;
+}
+
+.form__booking--summary {
+  margin-top: -25px;
+  background: var(--tide-booking-form-summary-background);
+  border-radius: var(--tide-booking-form-summary-border-radius);
+  outline: var(--tide-booking-form-summary-border);
+
+  .form__region {
+    padding: 22.5px 15px;
+  }
+
+  .form__row + .form__row {
+    margin-top: 0px;
+  }
+
+  li {
+    font-size: 16px;
+    line-height: 1.6;
+    p {
+      font-size: 16px;
+      line-height: 1.6;
+    }
+  }
+}
+
+.form__booking--message {
+  margin-top: -25px;
+  background: var(--tide-booking-confirmation-background);
+  border-radius: var(--tide-booking-confirmation-border-radius);
+  outline: var(--tide-booking-confirmation-border);
+  padding: 0px 15px;
+}
+
+.form__booking--flight {
+  .booking-card__group {
+    outline: none;
+    border-radius: 0px;
+    background: transparent;
+  }
+}