cyb/src/components/containerGradient/saber/index.module.scss

@mixin saber-background($position) {
  content: '';
  position: absolute;
  z-index: -2;
  #{$position}: 0;

  @if ($position == left or $position == right) {
    top: 0;
    height: 100%;
    width: 20%;
  } @else {
    width: 100%;
    left: 0;
    height: 50px;
  }

  filter: blur(1px);

  background: linear-gradient(
    /* vise versa */ to #{$position},
    rgba(0, 0, 0, 0) 0%,
    rgba(var(--color-r), var(--color-g), var(--color-b), 0.11) 90%,
    rgba(var(--color-r), var(--color-g), var(--color-b), 0.15) 95%,
    rgba(var(--color-r), var(--color-g), var(--color-b), 0.1) 100%
  );
}

// check Storybook for more documentation
$valid-colors: 'green', 'blue', 'purple', 'white', 'red', 'yellow', 'orange';
$valid-positions: 'left', 'right', 'top', 'bottom';
$saber-border-width: 2px;

@mixin saber($color: 'green', $position, $borderColor: 'white') {
  position: relative;

  // box-shadow: 0 0 10px rgba(var(--color-r), var(--color-g), var(--color-b), 0.5);

  @if ($color == 'green') {
    --color-r: 54;
    --color-g: 214;
    --color-b: 174;
  } @else if ($color == 'blue') {
    --color-r: 31;
    --color-g: 203;
    --color-b: 255;
  } @else if ($color == 'purple') {
    --color-r: 246;
    --color-g: 43;
    --color-b: 253;
  } @else if ($color == 'white') {
    --color-r: 225;
    --color-g: 225;
    --color-b: 225;
  } @else if ($color == 'red') {
    --color-r: 255;
    --color-g: 0;
    --color-b: 0;
  } @else if ($color == 'yellow') {
    --color-r: 255;
    --color-g: 217;
    --color-b: 0;
  } @else if ($color == 'orange') {
    --color-r: 255;
    --color-g: 92;
    --color-b: 0;
  } @else {
    @error "Invalid color: #{$color}";
  }

  @if ($borderColor == 'color') {
    border-#{$position}: $saber-border-width
      solid
      rgb(var(--color-r), var(--color-g), var(--color-b)) !important;
  } @else {
    border-#{$position}: $saber-border-width solid white;
  }

  @if ($position == left or $position == top) {
    &::before {
      @include saber-background($position);
    }
  } @else if ($position == right or $position == bottom) {
    &::after {
      @include saber-background($position);
    }
  } @else {
    @error "Invalid position: #{$position}";
  }
}

@mixin saber-horizontal($color, $borderColor: 'white') {
  @include saber($color, left, $borderColor);
  @include saber($color, right, $borderColor);
}

@mixin saber-vertical($color) {
  @include saber($color, top);
  @include saber($color, bottom);
}