cyb/src/components/Tabs/TabItem/TabItem.module.scss

@use '../../containerGradient/saber/index.module.scss' as *;

@mixin active-saber($position) {
  $color-saber: 'white';
  color: #fff;
  font-size: 24px;

  &:hover {
    color: #fff;
    text-shadow: unset;
  }

  @if ($position ==left or $position ==right) {
    @include saber($color-saber, $position);
  } @else {
    @include saber-horizontal($color-saber);
  }
}

@mixin changeWidth($pseudo) {
  &::#{$pseudo} {
    width: 100%;
  }
}

.tabButton {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: var(--blue-light);
  height: 42px;
  width: 100%;
  font-size: 1rem;
  z-index: 0;
  transition: all 0.3s ease;

  &:hover {
    color: var(--blue-light);
    text-shadow: 0px 0px 10px var(--blue-light);
  }

  @include saber-horizontal('blue', 'color');

  &Active {
    @include active-saber(center);
  }
}

.disable {
  cursor: default;

  &:hover {
    text-shadow: unset;
  }
}

.left {
  @include saber('blue', right, 'color');
  @include changeWidth('after');

  border-left: unset;

  &::before {
    content: unset;
  }

  &Active {
    @include active-saber(right);
    @include changeWidth('after');
  }
}

.right {
  @include saber('blue', left, 'color');
  @include changeWidth('before');

  &::before {
    width: 100%;
  }

  border-right: unset;

  &::after {
    content: unset;
  }

  &Active {
    @include active-saber(left);
    @include changeWidth('before');
  }
}