////
/// Tab module : Shadow
/// @group Tab
////

@use 'src/module/selector';

/*
* Ombres ajoutées en Js si le contenu est plus grand que le conteneur
*/
#{ns(tabs__shadow)} {
  --tabs-list-height: #{space(12v)};

  @include before('', block) {
    @include absolute(4px, 0, null, 0);
    @include z-index(above);
    @include _tabs-scroll-shadow(false, false);
    @include height(calc(var(--tabs-list-height) - 8px));
    opacity: 0.8;
    pointer-events: none;
    transition: box-shadow 0.3s;
  }

  /**
  * Modifier ombre à gauche
  **/
  &--left {
    @include before {
      @include _tabs-scroll-shadow(true, false); // @TODO: à implementer dans la mixin shadow
    }
  }

  /**
  * Modifier ombre à droite
  **/
  &--right {
    @include before {
      @include _tabs-scroll-shadow(false, true); // @TODO: à implementer dans la mixin shadow
    }
  }

  /**
  * Modifier combinaison ombre à gauche et ombre à droite
  **/
  &--left#{&}--right {
    @include before {
      @include _tabs-scroll-shadow(true, true); // @TODO: à implementer dans la mixin shadow
    }
  }
}

@include selector.theme(dark) {
  #{ns(tabs__shadow)} {
    @include before {
      opacity: 1;
    }
  }
}