@use "../base/mixins";

/* stylelint-disable */
section.flexi-block.block--tabs-02 {

  padding-left: 0;
  padding-right: 0;

  .raptor-tabs {
    background: transparent;
    padding: 0;
  }

  .raptor-tabs__list {
    padding: 20px;
    background: var(--c-secondary);
    position: relative;
    border-radius: calc(var(--border-radius) * 2);
  }

  .raptor-tabs__track {
    container-type: scroll-state;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    z-index: 2;

    gap: var(--site-gutter);

    /* width */
    &::-webkit-scrollbar {
      height: 14px;
    }

    /* Track */
    &::-webkit-scrollbar-track {
      background: var(--c-l-grey);
      border-radius: 4px;
    }

    /* Handle */
    &::-webkit-scrollbar-thumb {
      background: var(--c-primary);
      border-radius: 4px;
    }

    /* Handle on hover */
    &::-webkit-scrollbar-thumb:hover {
      background: var(--c-primary);
    }
  }


  // Only apply when raptor-tabs__track has an overflow - see how container-type within the selector matched the container used here
  @container scroll-state(scrollable: x) {
    .raptor-tabs__tab {
      margin-bottom: 20px;
    }
  }

  .raptor-tabs__tab {
    width: max-content;
    white-space: nowrap;
    border-radius: calc(var(--border-radius) * 2);

    &.active {
      background: var(--c-l-grey);
    }
  }

  .raptor-tabs__panels {
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);

    .raptor-tabs__panel {
      background: var(--c-l-grey);
      padding: 30px 20px;
      position: relative;
      border-radius: calc(var(--border-radius) * 2);

      .content {
        margin: 0;
        min-width: unset;
      }


      &:has(.raptor-tabs__panel__image) {
        background: transparent;

        .content {
          margin-bottom: var(--site-gutter);
        }

        &::before {
          content: '';
          position: absolute;
          z-index: -1;
          top: 0;
          left: 0;
          height: 68%;
          width: 100%;
          border-radius: calc(var(--border-radius) * 2);
          background: var(--c-l-grey);
        }
      }
    }

    .raptor-tabs__panel__image {
      aspect-ratio: 16/9;
      width: 100%;
      border-radius: calc(var(--border-radius) * 2);
      height: auto;
      position: relative;
      overflow: hidden;

      img {
        @include mixins.object-fit
      }
    }
  }

  @include mixins.min-width(m) {
    padding-left: var(--site-padding);
    padding-right: var(--site-padding);

    .raptor-tabs {
      display: grid;
      grid-template-columns: clamp(270px, 25vw, 400px) 1fr;
      gap: var(--site-gutter);

      .raptor-tabs__panels {
        padding: 0;
        width: 100%;

        .raptor-tabs__panel {
          margin: 0;
          max-width: 100%;
          padding: 50px 32px;
        }
      }

      .raptor-tabs__list {
        position: sticky;
        top: var(--site-gutter);
        overflow: hidden;
        padding: 50px 20px;
      }

      .raptor-tabs__list, .raptor-tabs__track {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-height: fit-content;

        .raptor-tabs__tab {
          width: 100%;
          padding: 20px;
        }
      }
    }
  }

  @include mixins.min-width( xl ) {
    .raptor-tabs__panel.is-visible {
      &:has(.raptor-tabs__panel__image) {

        display: flex;

        > * {
          width: 30%;
        }

        > .content {
          width: 70%;
          padding-right: clamp(30px, 4vw, 60px);
        }

        .raptor-tabs__panel__image {
          aspect-ratio: 9/16;
        }

        &::before {
          height: 100%;
          width: 80%;
        }
      }
    }
  }
}