cyb/src/components/containerGradient/Display/Display.module.scss

@use '../saber/index.module' as *;
@use './variables.module' as *;
@use '../../../style/mixins' as *;

.wrapper {
  // TODO: remove this
  z-index: 0;
  display: flex;
  flex-direction: column;

  &:not(.vertical) {
    @each $color in $valid-colors {
      &.#{$color} {
        @include saber-horizontal($color);
      }
    }
  }

  &.vertical {
    @each $color in $valid-colors {
      &.#{$color} {
        @include saber-vertical($color);
      }
    }
  }

  &.left {
    &::after {
      content: '';
      display: none;
    }

    border-right: unset !important;

    &.vertical {
      border-bottom: unset !important;
    }
  }

  &.right {
    &::before {
      content: '';
      display: none;
    }

    border-left: unset !important;

    &.vertical {
      border-top: unset !important;
    }
  }

  .inner {
    padding: $display-padding-top $display-padding-x;
    overflow: auto;
    height: 100%;
    max-height: 100%;

    @media (max-width: 540px) {
      padding: $display-padding-top-mobile $display-padding-x-mobile;
    }
  }

  &.noPaddingX {
    .inner {
      padding-left: unset;
      padding-right: unset;
    }
  }

  &.noPaddingY {
    .inner {
      padding-top: unset;
      padding-bottom: unset;
    }
  }

  &.header {
    position: relative;
    top: -$display-padding-top;
  }

  @include blueScroll;
}