@use "../base/mixins";

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

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

  .raptor-tabs__list {
    position: relative;
  }

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

    gap: var(--site-gutter);
  }


  // 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;

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

  .raptor-tabs__panels {

    padding-top: 0;

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

      .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%;
          background: var(--c-l-grey);
        }
      }
    }

    .raptor-tabs__panel__image {
      aspect-ratio: 16/9;
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

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

  .raptor-tabs__tab {
    background: var(--c-secondary);
    height: fit-content;

    &.is-visible {
      background: var(--c-l-grey);
      padding-bottom: 20px;

      img {
        // https://angel-rs.github.io/css-color-filter-generator/ - super useful website for this
        filter: brightness(0) saturate(100%) invert(3%) sepia(78%) saturate(7500%) hue-rotate(259deg) brightness(104%) contrast(99%);      }
    }
  }

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

    .raptor-tabs {
      display: grid;
      grid-template-columns: 100px 1fr;


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

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

      .raptor-tabs__list {
        position: static;
        top: var(--site-gutter);
        overflow: hidden;
        padding: 0;
      }

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

        .raptor-tabs__tab {
          width: fit-content;
          padding: 10px;
          background: var(--c-secondary);
          border-radius: calc( var(--border-radius) * 2 );

          &.is-visible {
            background: var(--c-l-grey);
            width: 100%;
            border-radius: calc( var(--border-radius) * 2 ) 0 0 calc( var(--border-radius) * 2 );
          }

          .raptor-tabs__tab__icon {
            display: block;
            width: 40px;
            height: 40px;
            padding: 10px;
            aspect-ratio: 1/1;
            position: relative;
            overflow: hidden;

            img {
              @include mixins.object-fit;
              object-fit: contain;
            }
          }
        }
      }
    }
  }

  @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%;
        }
      }
    }
  }
}