@use "../base/mixins";

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

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

  .raptor-tabs__list {
    position: relative;
  }

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

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

  .raptor-tabs__panel__icon {
    margin-bottom: 18px;

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

  .raptor-tabs__tab {
    width: max-content;
    white-space: nowrap;
  }

  .raptor-tabs__panels {

    padding-top: 0;

    .raptor-tabs__panel {
      background: var(--c-l-grey);
      padding: clamp(30px, 10vw, 60px) clamp(20px, 6vw, 60px);
      position: relative;

      h2 {
        margin-top: 0;
      }

      .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__list, .raptor-tabs__track {
    display: flex;
    flex-direction: row;
    gap: clamp(10px, 4vw, 30px);
    max-height: fit-content;
    background: none;
  }

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

    &.is-visible {
      background: var(--c-l-grey);
      padding-bottom: 20px;
      border-radius: calc(var(--border-radius) * 2) calc(var(--border-radius) * 2) 0 0;

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