@import "../scss/sc-mixins/sc-breakpoints";
@import "../scss/sc-variables";

:host {
  display: block;
  height: 100%;
}

.status-timeline {
  padding: $spacer;
  height: 100%;

  &__item {
    min-height: 64px;
    display: flex;
    gap: $spacer;
    position: relative;

    &:last-child {
      min-height: auto;

      .status__container::after {
        content: none;
      }

      .description {
        padding-bottom: 0 !important;
      }
    }

    .status {
      &__container {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;

        &::after {
          content: "";
          border-right: 1px solid;
          width: 0;
          flex: 1;
        }
      }

      &__indicator {
        width: 40px;
        flex: 0 0 40px;
        border-radius: 40px;
        border: 1px solid;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .content {
      &__container {
        flex: 1;
        min-width: 0;

        display: flex;
        flex-direction: column;
        gap: $spacer * 0.25;

        .title,
        .caption {
          margin-bottom: 0;
        }

        .title.mat-subheading-2 {
          line-height: 24px;
        }

        .caption.mat-caption {
          line-height: 1;
        }

        .description {
          padding: ($spacer * 0.75) 0 $spacer 0;
        }
      }
    }
  }

  &.--nav {
    .status-timeline {
      &__item {
        &::after {
          content: "";
          position: absolute;
          top: ($spacer * -0.5);
          right: -$spacer;
          bottom: ($spacer * 0.5);
          left: -$spacer;
          z-index: -1;
          transition: background-color $hover-transition-duration linear;
        }

        &:last-child::after {
          bottom: ($spacer * -0.5);
        }

        &:focus {
          outline: 0;
        }
      }
    }
  }

  &.--horizontal {
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;

    .status-timeline {
      &__btn-prev,
      &__btn-next {
        height: 100%;
        border-radius: 0;
      }

      &__btn-prev {
        border-right: 1px solid;
      }

      &__btn-next {
        border-left: 1px solid;
      }

      &__scroll-container {
        container-type: inline-size;
        container-name: hori-status-tl;

        flex: 1;
        width: 100%;
        height: 100%;
        display: flex;
        overflow-y: auto;
        scroll-snap-type: x mandatory;
        padding: $spacer 0;
        grid-column: 2;

        /* Hide scrollbar for IE, Edge and Firefox */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */

        /* Hide scrollbar for Chrome, Safari and Opera */
        &::-webkit-scrollbar {
          display: none;
        }
      }

      &__item {
        scroll-snap-align: start;
        flex: 0 0 100%;
        flex-direction: column;
        min-height: auto;
        // overflow: hidden;

        @container hori-status-tl (min-inline-size: 340px) {
          flex: 0 0 50%;
        }

        @container hori-status-tl (min-inline-size: 500px) {
          flex: 0 0 33.33%;
        }

        @container hori-status-tl (min-inline-size: 660px) {
          flex: 0 0 25%;
        }

        @container hori-status-tl (min-inline-size: 820px) {
          flex: 0 0 20%;
        }

        @container hori-status-tl (min-inline-size: 980px) {
          flex: 0 0 16.66%;
        }

        @container hori-status-tl (min-inline-size: 1140px) {
          flex: 0 0 14.29%;
        }

        @container hori-status-tl (min-inline-size: 1300px) {
          flex: 0 0 12.5%;
        }

        @container hori-status-tl (min-inline-size: 1460px) {
          flex: 0 0 11.11%;
        }

        @container hori-status-tl (min-inline-size: 1620px) {
          flex: 0 0 10%;
        }

        @container hori-status-tl (min-inline-size: 1780px) {
          flex: 0 0 9.09%;
        }

        @container hori-status-tl (min-inline-size: 1940px) {
          flex: 0 0 8.33%;
        }

        .status {
          &__container {
            flex-direction: row;

            &::before {
              content: "";
              border-top: 1px solid;
              height: 0;
              flex: 1;
            }

            &::after {
              content: "";
              border-top: 1px solid;
              height: 0;
              flex: 1;
            }
          }

          &__indicator {
            height: 40px;
          }
        }

        .content {
          &__container {
            padding: 0 $spacer;

            .title,
            .caption {
              text-align: center;
            }

            .description {
              padding-bottom: 0;
            }
          }
        }
      }
    }

    &.--nav {
      .status-timeline {
        &__item {
          &::after {
            top: -$spacer;
            right: 0;
            bottom: -$spacer;
            left: 0;
          }

          &:last-child::after {
            bottom: -$spacer;
          }
        }
      }
    }
  }
}