cyb/src/containers/portal/components/scrollableTabs/ScrollableTabs.scss

$color-green: #36d6ae;
$color-white: #fff;
$color-shadow-lamp-green: rgba(54, 214, 174, 0.5);
$color-shadow-lamp-white: rgba(255, 255, 255, 0.44);
$color-border-lamp-green: #00edeb;
$color-border-lamp-white: #e2e2e2;

$item-width: 120px;
$item-height: 40px;

$level-2-left: 360px;
$level-1-left: 240px;
$level0-left: 120px;
$level1-left: 0px;
$level2-left: 50px;

.carousel {
  position: relative;
  height: $item-height;
  width: 100%;
  max-width: 360px;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  font-size: 16px;
}

.item {
  height: $item-height;
  width: 120px;
  line-height: $item-height;
  text-align: center;
  color: white;
  position: absolute;
  background-color: transparent;
  transition: height 1s, width 1s, left 1s, margin-top 1s, line-height 1s,
    background-color 1s;
}

@mixin init-pseudo-el {
  content: '';
  height: $item-height;
  position: absolute;
}

@mixin init-pseudo-el-gren-default {
  @include init-pseudo-el;
  width: 100%;
  left: 0;
  bottom: 0;
  //   border-radius: 2px;
}

@mixin linear-gradient-gray-left {
  @include init-pseudo-el;
  width: 30%;
  left: 0;
  bottom: 0;
}

@mixin linear-gradient-gray-right {
  @include init-pseudo-el;
  width: 30%;
  right: 0;
  bottom: 0;
}

@mixin linear-gradient-gray($route) {
  background: linear-gradient(
    $route,
    rgba(217, 217, 217, 0.03) 0%,
    rgba(255, 255, 255, 0.2) 100%
  );
}

@mixin linear-gradient-green($route) {
  background: linear-gradient(
    $route,
    rgba(0, 237, 235, 0.07) 25%,
    rgba(0, 237, 235, 0.4) 75%
  );
}

.level-1 {
  left: $level-1-left;
  color: $color-green;
  &::before {
    @include init-pseudo-el-gren-default;
    @include linear-gradient-green(-90deg);
    border-radius: 0px 2px 2px 0px;
  }
}

.level0 {
  color: $color-white;
  left: $level0-left;
  &::before {
    @include linear-gradient-gray-left;
    @include linear-gradient-gray(-90deg);
  }
  &::after {
    @include linear-gradient-gray-right;
    @include linear-gradient-gray(90deg);
  }
}

.level1 {
  left: $level1-left;
  color: $color-green;
  &::before {
    @include init-pseudo-el-gren-default;
    @include linear-gradient-green(90deg);
    border-radius: 2px 0px 0px 2px;
  }
}

.left-enter {
  opacity: 0;
  left: -120px;
  height: $item-height;
  width: $item-width;
  line-height: $item-height;
  margin-top: 0px;
}

.left-enter.left-enter-active {
  opacity: 1;
  left: 0px;
  height: $item-height;
  width: $item-width;
  line-height: $item-height;
  margin-top: 0px;
  transition: left 1s, opacity 1s, height 1s, width 1s, margin-top 1s,
    line-height 1s;
}

.left-leave {
  opacity: 1;
  left: 360px;
  height: $item-height;
  width: $item-width;
  line-height: $item-height;
  margin-top: 0px;
}

.left-leave.left-leave-active {
  left: 360px;
  opacity: 0;
  height: $item-height;
  line-height: 40px;
  margin-top: 0px;
  width: $item-width - 20;
  transition: left 1s, opacity 1s, height 1s, width 1s, margin-top 1s,
    line-height 1s;
}

.right-enter {
  opacity: 0;
  left: $level-2-left;
  height: $item-height;
  width: $item-width - 20;
  line-height: $item-height;
  margin-top: 0px;
}

.right-enter.right-enter-active {
  left: $level-1-left;
  opacity: 1;
  height: $item-height;
  margin-top: 0px;
  line-height: $item-height;
  width: $item-width;
  transition: left 1s, opacity 1s, height 1s, width 1s, margin-top 1s,
    line-height 1s;
}

.right-leave {
  left: 0;
  height: $item-height;
  opacity: 1;
  margin-top: 0px;
  line-height: $item-height;
  width: $item-width;
}

.right-leave.right-leave-active {
  left: 0 - $item-width;
  opacity: 0;
  height: $item-height;
  width: $item-width;
  line-height: $item-height;
  margin-top: 0px;
  transition: left 1s, opacity 1s, height 1s, width 1s, margin-top 1s,
    line-height 1s;
}

.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin light-lamp($color-bgr, $color-border, $color-shadow) {
  background: $color-bgr;
  border: 1px solid $color-border;
  box-sizing: border-box;
  box-shadow: 0px 0px 5px 1px $color-shadow;
}

@mixin light-lamp-left {
  left: 0;
  border-radius: 0px 1px 1px 0px;
}

@mixin light-lamp-right {
  right: 0;
  border-radius: 1px 0px 0px 1px;
}

@mixin init-lamp-pseudo-el {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
}

.itemLamp {
  position: absolute;
  height: 100%;
  box-sizing: border-box;
  width: 100%;

  &level0 {
    &::before {
      @include init-lamp-pseudo-el;
      @include light-lamp-left;
      @include light-lamp(
        $color-white,
        $color-border-lamp-white,
        $color-shadow-lamp-white
      );
    }

    &::after {
      @include init-lamp-pseudo-el;
      @include light-lamp-right;
      @include light-lamp(
        $color-white,
        $color-border-lamp-white,
        $color-shadow-lamp-white
      );
    }
  }

  &level1 {
    &::after {
      @include init-lamp-pseudo-el;
      @include light-lamp-right;
      @include light-lamp(
        $color-green,
        $color-border-lamp-green,
        $color-shadow-lamp-green
      );
    }
  }

  &level-1 {
    &::before {
      @include init-lamp-pseudo-el;
      @include light-lamp-left;
      @include light-lamp(
        $color-green,
        $color-border-lamp-green,
        $color-shadow-lamp-green
      );
    }
  }
}