@use '../components/mixins' as mixins;

* {
  box-sizing: border-box;
}

.flyin {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  justify-content: flex-end;
  z-index: 100001;
  pointer-events: none;
  transition: background 0.2s ease;

  &--active {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
  }

  &--medium {
    .flyin__panel {
      @include mixins.media-sm {
        width: 100%;
        max-width: 1200px;
      }

      .search__results__cards {
        @include mixins.media-md {
          grid-template-columns: repeat(2, 1fr);
        }

        @include mixins.media-lg {
          grid-template-columns: repeat(3, 1fr);
        }
      }
    }
  }

  &--large {
    .flyin__panel {
      @include mixins.media-sm {
        width: 80%;
      }
    }

    .flyin__acco__cards {
      @include mixins.media-lg {
        grid-template-columns: repeat(3, 1fr);
      }
    }
  }

  &__panel {
    background: var(--tide-booking-gray-xlight);
    height: 100%;
    width: 100%;
    max-width: 100%;
    transform: translateX(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
    box-shadow: none;
    border-radius: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    @extend %scrollbar-thin;

    @include mixins.media-sm {
      width: 80%;
      box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
    }

    @include mixins.media-lg {
      width: 850px;
    }

    &--active {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  &__close {
    font-size: 14px;
    cursor: pointer;
    color: var(--tide-booking-color-primary);
    text-decoration: underline;
  }

  &__content {
    // background: var(--tide-booking-gray-background-light);
    position: relative;
    padding: 15px;
    padding-bottom: 0px;

    @include mixins.media-sm {
      padding: 30px;
      padding-bottom: 0px;
    }

    & + .flyin__content {
      padding: 0 15px;
      padding-bottom: 0px;

      @include mixins.media-sm {
        padding: 0 30px;
        padding-bottom: 0px;
      }
    }

    &-title {
      margin: 0px;
      font-weight: 700;

      &-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 15px;
      }

      &__back {
        display: flex;
        align-items: center;
        gap: 3px;
        cursor: pointer;

        svg {
          transform: rotate(180deg);
        }
      }
    }

    &-arrow {
      height: 30px;
      width: 30px;
      background: var(--tide-booking-white);
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &.is-disabled {
        opacity: 0.4;
        pointer-events: none;
        cursor: not-allowed;
      }

      &:hover {
        background: var(--tide-booking-color-primary);

        .flyin__content-arrow-icon {
          color: var(--tide-booking-white);

          &-- {
            &forward {
              transform: rotate(180deg);
            }
          }
        }
      }

      &-row {
        display: flex;
        gap: 15px;
        width: auto;
        justify-content: end;
        align-items: center;
        flex: 0 0 auto;
        margin-bottom: 10px;

        @include mixins.media-sm {
          justify-content: start;
          margin-bottom: 0;
        }
      }

      &-icon {
        fill: var(--tide-booking-color-primary-light);
        transition: all 0.3s ease;

        &--forward {
          transform: rotate(180deg);
        }
      }
    }

    &-text {
      font-size: 12px;
      color: var(--tide-booking-gray-dark);

      &-icon {
        position: absolute;
        top: 0;
        left: -20px;
        transform: translateY(50%);

        &-row {
          display: flex;
          width: 100%;
          flex-direction: column;
          align-items: flex-start;
          flex: 0 0 auto;
          // order: 2;
          margin-bottom: 10px;

          @include mixins.media-sm {
            width: auto;
            gap: 15px;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0;
          }

          img {
            width: auto;
            height: 80px;
          }

          span {
            font-size: var(--tide-booking-black);
            color: var(--tide-booking-gray-dark);
          }
        }
      }

      &-title {
        font-size: 18px;
        font-weight: 700;

        &-row {
          position: relative;

          strong {
            font-weight: 600;
          }
        }
      }

      &-row {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        // margin-bottom: 15px;
        flex-wrap: wrap;
        margin-right: 0;
        padding-top: 15px;
        border-top: 1.5px solid var(--tide-booking-gray-background-light);

        @include mixins.media-sm {
          row-gap: 10px;
          column-gap: 50px;
          justify-content: space-between;
        }
      }

      &-col {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        flex: 0 0 auto;
        width: 100%;
        order: 1;
        margin-bottom: 10px;
        margin-top: 5px;

        @include mixins.media-sm {
          width: auto;
          order: 0;
          margin-bottom: 0px;
          margin-top: 0px;
        }
      }
    }

    &-cards {
      display: flex;
      gap: 15px;
      // overflow-x: auto;
      // scroll-behavior: smooth;
      width: max-content;
      padding: 15px;
      // -ms-overflow-style: none;
      // scrollbar-width: none;

      @include mixins.media-sm {
        gap: 30px;
        padding: 15px 30px;
      }

      &-wrapper {
        position: relative;
        // scrollbar-width: none;
        // -ms-overflow-style: none;
        overflow-x: scroll;
        overflow-y: visible;
        min-height: min-content;

        // &::-webkit-scrollbar {
        //   display: none;
        // }
      }

      /* Hide scrollbar */
      // &::-webkit-scrollbar {
      //   display: none;
      // }
    }

    &-card {
      display: flex;
      flex-direction: column;
      padding-bottom: 20px;
      border-radius: 24px;
      background: var(--tide-booking-white);
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
    }

    // Slicing with image and usps,
    // not available in the current API response.
    &-card--flight {
      // height: 522px;
      width: 100%;
      max-width: 315px;
      min-width: 315px;

      border-radius: 16px;
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      background: var(--tide-booking-white);
      transition: all 0.4s ease;
      cursor: pointer;

      @include mixins.media-sm {
        max-width: 345px;
        min-width: 345px;
      }

      &:hover {
        .flyin__content-card-top {
          background: var(--tide-booking-color-primary-fade);
        }

        .flyin__content-card-button {
          // background: var(--tide-booking-color-primary);
          color: var(--tide-booking-white);

          .cta--select {
            background: var(--tide-booking-cta-background-select-hover);
          }
        }
      }

      &.flyin__content-card--selected {
        .flyin__content-card-top {
          background: var(--tide-booking-color-primary-gradient);
          border-bottom: none;
        }

        .flyin__content-card-top-price {
          color: var(--tide-booking-white);
        }

        .flyin__content-card-top-tag {
          color: var(--tide-booking-white);
        }

        .flyin__content-card-middle {
          // border-left: 4px solid var(--tide-booking-color-primary);
          // border-right: 4px solid var(--tide-booking-color-primary);
        }

        &:hover {
          .flyin__content {
            cursor: default;
          }

          .flyin__content-card-top {
            background: var(--tide-booking-color-primary-gradient);
          }
        }
      }

      .flyin__content-card-top {
        min-height: 60px;
        width: 100%;
        background: var(--tide-booking-color-primary);
        display: flex;
        justify-content: space-between;
        align-items: end;
        padding: 0 15px 12px 15px;
        background: var(--tide-booking-white);
        transition: all 0.4s ease;

        &-price {
          font-size: 18px;
          font-weight: 700;
          color: var(--tide-booking-black);

          &--decrease {
            color: green;
          }

          &--increase {
            color: red;
          }
        }

        &-tag {
          font-size: 24px;
          color: var(--tide-booking-black);
          /* color: variables.$white; */
          font-weight: 700;
        }
      }

      .flyin__content-card-middle {
        height: 430px;
        background: var(--tide-booking-white);
        transition: all 0.4s ease;

        &-rows {
          display: flex;
          flex-direction: column;
          gap: 10px;
          padding: 15px 15px 0 15px;
          max-height: 430px;
        }

        &-row {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-bottom: 5px;
          border-bottom: 1px dashed var(--tide-booking-color-primary-light);

          &-left {
            font-weight: 500;
            color: var(--tide-booking-black);
          }

          &-right {
            font-weight: 300;
          }
        }
      }

      .flyin__content-card-bottom {
        height: 30px;
        background: var(--tide-booking-color-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--tide-booking-white);
        font-size: 14px;
        transition: all 0.4s ease;
      }

      .flyin__content-card-button {
        // border: 1.25px solid var(--tide-booking-color-primary);
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--tide-booking-color-primary);
        padding: 15px;
        cursor: pointer;
        font-size: 14px;
        transition: all 0.2s ease;
      }
    }

    &-data {
      display: flex;
      flex-direction: column;
      gap: 10px;
      height: 300px;
      overflow-y: auto;
      @extend %scrollbar-thin;

      &__title {
        font-size: 18px;
        color: var(--tide-booking-gray-dark);
      }

      &__item {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: auto;
        gap: 10px;
        align-items: flex-start;

        &-icon {
          // margin-top: 3px;
          color: var(--tide-booking-black);

          // &--other {
          //   margin-top: 0;
          // }
        }

        &-content {
          display: flex;
          flex-direction: column;
          gap: 3px;

          &-title {
            font-size: 16px;
            font-weight: 500;
            margin-top: 0.125rem;
            color: var(--tide-booking-black);
          }

          &-description {
            font-size: 16px;
            font-weight: 300;
            color: var(--tide-booking-gray-dark);

            @include mixins.media-sm {
              overflow-wrap: break-word;
              // inline-size: 60vw;
            }

            &--last {
              margin-top: 5px;
            }

            &--list {
              list-style-type: disc;
              padding-left: 10px;
              margin-top: 5px;

              li {
                margin-bottom: 5px;
              }
            }
          }
        }

        &-price {
          font-size: 16px;
          color: var(--tide-booking-gray-dark);
          white-space: nowrap;
          margin-left: 15px;
          margin-top: 5px;
        }
      }
    }

    &--columns {
      display: flex;
      gap: 10px;

      .search__results__wrapper {
        width: 100%;
      }

      .search__results__cards {
        grid-template-rows: auto;
        align-content: flex-start;
      }
    }
  }

  &__button {
    height: 30px;
    width: 100%;
    border: 1.25px solid var(--tide-booking-color-primary);
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--tide-booking-color-primary);
    color: var(--tide-booking-white);
    margin: 1rem;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;

    @include mixins.media-sm {
      width: 216px;
    }

    &-wrapper {
      display: flex;
      justify-content: flex-end;

      .cta {
        width: auto;
        min-width: 150px;
      }

      &--white {
        @include mixins.media-sm {
        }
      }
    }

    &:hover {
      background: var(--tide-booking-color-primary);
      border: var(--tide-booking-color-primary);
    }

    &--white {
      background: var(--tide-booking-white);
      color: var(--tide-booking-color-primary);
      margin-top: 0;

      &:hover {
        background: var(--tide-booking-color-primary-light);
        border: var(--tide-booking-color-primary-light);
      }
    }
  }

  &__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    position: sticky;
    bottom: 0;
    padding: 15px;

    background: var(--tide-booking-white);

    z-index: 1;

    @include mixins.media-sm {
      margin-top: auto;
      padding: 30px;
    }

    &__price {
      font-size: 18px;
      font-weight: 700;
      color: var(--tide-booking-black);
    }
  }

  &__acco {
    padding-bottom: 30px;

    &__cards {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      gap: 30px;

      @include mixins.media-sm {
        grid-template-columns: repeat(2, 1fr);
      }

      // @include mixins.media-xxl {
      //   grid-template-columns: repeat(3, 1fr);
      // }
    }

    &__card {
      display: flex;
      flex-direction: column;
      gap: 15px;
      border-radius: 24px;
      background: var(--tide-booking-white);
      box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.1);
      padding-bottom: 20px;
    }

    &__img {
      width: 100%;
      height: 100%;
      object-fit: cover;

      &__wrapper {
        position: relative;
        width: 100%;
        height: 200px;
        overflow: hidden;
        border-radius: 24px 24px 0 0;
        background-color: #f5f5f5;
      }
    }

    &__usps {
      display: flex;
      flex-wrap: wrap;
      gap: 15px;
    }

    &__usp {
      display: flex;
      align-items: center;
      gap: 3px;
    }

    &__price {
      font-family: var(--tide-booking-search-hotel-card-price-font-family);
      font-weight: var(--tide-booking-search-hotel-card-price-font-weight);
      color: var(--tide-booking-search-hotel-card-price-color);
      font-size: 20px;
      white-space: nowrap;

      // &__wrapper {
      //   position: absolute;
      //   bottom: 0px;
      //   right: 0px;
      //   background: var(--tide-booking-search-hotel-card-price-background-color);
      //   display: flex;
      //   flex-flow: column nowrap;
      //   align-items: center;
      //   justify-content: center;
      //   gap: 5px;
      //   padding: 5px 20px;
      //   border-radius: 5px 0 0 0;
      //   box-shadow: var(--tide-booking-search-hotel-card-price-box-shadow);
      // }
      &__wrapper {
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
        justify-content: center;
        gap: 5px;
      }

      &__label {
        font-size: 12px;
        font-weight: var(--tide-booking-search-hotel-card-price-label-font-weight);
        color: var(--tide-booking-search-hotel-card-price-label-color);
      }

      &--increase {
        color: var(--tide-booking-price-increase);
      }

      &--decrease {
        color: var(--tide-booking-price-decrease);
      }
    }

    &__content {
      padding: 20px 20px 0px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: 10px;
    }

    &__footer {
      margin-top: auto;
      padding: 0 20px;
      display: flex;
      flex-direction: column;
      gap: 10px;

      &__actions {
        display: flex;
        gap: 15px;
      }
    }

    .dropdown {
      width: 100%;

      &-menu {
        top: 45px;
      }

      &::after {
        content: '';
        display: none;
      }

      &__input {
        gap: 0;
      }
    }
  }
}