:root {
  --video-gallery-column-width: 25%;
}

.video-gallery {
  @include use-responsive-sizing(gap, $gaps);

  @include mq($from: l) {
    display: flex;
  }
}

.video-gallery__videos {
  flex-grow: 1;
  flex-shrink: 0;
}

.video-gallery__video {
  &[aria-hidden='true'] {
    display: none;
  }
}

.video-gallery__tabs-wrapper {
  --video-gallery-inline-margin: calc(var(--body-padding) * -1);

  position: relative;

  @include mq($from: l) {
    inline-size: var(--video-gallery-column-width);
  }
}

.video-gallery__tabs {
  align-items: stretch;
  display: flex;
  margin-inline: var(--video-gallery-inline-margin);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2rem;
  position: relative;

  @include mq($from: l) {
    flex-direction: column;
    flex-shrink: 0;
    inset: 0;
    margin-block: -2rem;
    margin-inline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
  }
}

.video-gallery__tab {
  display: block;
  flex-shrink: 0;
  inline-size: 60%;
  max-inline-size: 25rem;
  position: relative;
  z-index: 1;

  & + & {
    margin-inline-start: 2rem;
  }

  @include mq($from: l) {
    inline-size: 100%;
    max-inline-size: none;

    & + & {
      margin-block-start: 2rem;
      margin-inline-start: 0;
    }
  }
}

.video-gallery__tab-fadeout {
  --video-gallery-tab-fadeout-direction: 90deg;

  inline-size: 2rem;
  inset-block: 0;
  position: absolute;
  z-index: 2;

  &:first-child {
    background-image: linear-gradient(var(--video-gallery-tab-fadeout-direction), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
    inset-inline-start: var(--video-gallery-inline-margin);
  }

  &:last-child {
    background-image: linear-gradient(var(--video-gallery-tab-fadeout-direction), rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    inset-inline-end: var(--video-gallery-inline-margin);
  }

  @include mq($from: l) {
    --video-gallery-tab-fadeout-direction: 180deg;

    block-size: 2rem;
    inline-size: 100%;

    &:first-child {
      inset-block-end: auto;
      inset-block-start: -2rem;
      inset-inline: 0;
    }

    &:last-child {
      inset-block-end: -2rem;
      inset-block-start: auto;
      inset-inline: 0;
    }
  }
}

.video-gallery__tab-link {
  --video-gallery-tab-play-background-color: var(--color-orange);

  display: block;
  transition-property: opacity;

  &:is(:hover:not([disabled]), :focus:not(.has-invisible-focus)) {
    --video-gallery-tab-play-background-color: var(--color-white);
  }

  &:is([aria-selected='true']) {
    opacity: 0.5;
    pointer-events: none;
  }
}

.video-gallery__tab-image {
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  position: relative;
}

.video-gallery__tab-play {
  align-items: center;
  background-color: var(--video-gallery-tab-play-background-color);
  block-size: 3rem;
  border: 2px solid var(--color-orange);
  color: var(--color-midnight);
  display: flex;
  font-size: 1.4rem;
  inline-size: 3rem;
  inset-block-end: 2rem;
  inset-inline-end: 2rem;
  justify-content: center;
  line-height: 0;
  position: absolute;
  transition-property: background-color;
  z-index: 3;
}

.video-gallery__tab-title {
  font-size: 1.4rem;
  line-height: var(--line-height-body);
  margin-block-start: 1.2rem;
}