@use "../base/mixins";
@use "../vars/variables";

.quick-tips {
  max-width: inherit;
  @include mixins.card-minimal;
  cursor: default;

  &--desktop {
    @media screen and (max-width: variables.$bp-tablet) {
      display: none;
    }
  }

  &--tablet {
    display: none;

    @media screen and (max-width: variables.$bp-tablet) {
      display: block;
      margin-bottom: 1.25rem;
    }

    &.quick-tips--inactive {
      display: none;
    }
  }

  &__item {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-decoration: none;
    padding: 1.88rem;
    gap: 0.625rem;

    @media only screen and (max-width: 1250px) {
      padding: 1.25rem;
    }

    @media screen and (max-width: variables.$bp-phone) {
      flex-direction: column;
      padding: 1.25rem 1.25rem 1.875rem;
      gap: 1.25rem;
    }

    &__image {
      max-width: 6.25rem;
      width: 100%;

      @media screen and (max-width: variables.$bp-phone) {
        margin-left: 0;
        margin-right: auto;
      }

      img {
        width: 100%;
      }
    }

    &__body {
      display: flex;
      flex-direction: column;
      height: 100%;
      font-size: 1rem;
      font-weight: 300;
      width: 100%;
      justify-content: center;
      gap: 0.5rem;
      text-align: left;

      h2 {
        @include mixins.body-large;
        color: var(--uc-theme-color-80);
      }

      p {
        @include mixins.body-large;
        color: var(--uc-theme-color-50);
      }
    }
  }

  &__carousel {
    &.carousel {
      height: 100%;
      padding: 0;
      margin: 0;
      position: relative;
      // vue3-carousel 0.4+ sets `.carousel { z-index: 1 }`, which lifts this
      // tips carousel above the (auto-z-index) customise-remote overlay that
      // renders over the still-mounted home section. Reset to the pre-upgrade
      // `auto` so it stays in normal flow order and doesn't bleed through.
      z-index: auto;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: flex-start;
      align-items: stretch;

      * {
        box-sizing: border-box;
      }
    }

    .carousel {
      &__next,
      &__prev {
        display: none;
      }

      &__pagination {
        position: absolute;
        top: 1.25rem;
        right: 1.88rem;
        display: flex;
        justify-content: center;
        list-style: none;
        padding: 0;
        margin: 0;

        @media screen and (max-width: variables.$bp-phone) {
          top: 0.625rem;
          right: 1.25rem;
        }

        &-button {
          margin: 0.25rem;
          width: 0.5rem;
          height: 0.5rem;
          border-radius: 0.25rem;
          border: 0;
          padding: 0;
          cursor: pointer;
          background-color: var(--uc-theme-color-40);
          transition: all variables.$transition-bg-timing;

          &--active {
            width: 1.5rem;
            background-color: var(--uc-theme-color-70);
            transition: all variables.$transition-bg-timing;
          }
        }
      }

      &__slide {
        scroll-snap-stop: auto;
        flex-shrink: 0;
        margin: 0;
        position: relative;
        height: 100%;

        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        align-content: flex-start;
      }

      &__track {
        height: 100%;
        margin: 0;
        padding: 0;
        position: relative;

        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: flex-start;
        justify-content: flex-start;
        align-items: center;
      }

      &__viewport {
        overflow: hidden;
        flex-grow: 1;
        flex-shrink: 0;
        width: 100%;
        height: 100%;
      }
    }

    .carousel__sr-only {
      display: none;
    }
  }
}