cyb/src/components/LinearGradientContainer/LinearGradientContainer.module.scss

$linear-gradient-blue: linear-gradient(180deg,
    rgba(0, 237, 235, 0) -3.3%,
    rgba(0, 237, 235, 0.35) 100%);

$linear-gradient-pink: linear-gradient(180deg,
    rgba(246, 43, 253, 0) -3.3%,
    rgba(246, 43, 253, 0.3) 100%);

$linear-gradient-yellow: linear-gradient(180deg,
    rgba(252, 240, 0, 0) -3.3%,
    rgba(252, 240, 0, 0.25) 100%);

$linear-gradient-red: linear-gradient(180deg,
    rgba(255, 0, 0, 0.033) -3.3%,
    rgba(255, 0, 0, 0.3) 100%);
$linear-gradient-black: linear-gradient(180deg,
    rgba(0, 0, 0, 0) -3.3%,
    rgba(255, 255, 255, 0.32) 100%);
$linear-gradient-green: linear-gradient(180deg,
    rgba(33, 71, 62, 0.3) -3.3%,
    rgba(54, 214, 174, 0.3) 100%);
// $color-border-bottom-blue: #00edeb;
// $color-border-bottom-pink: #f62bfd;
// $color-border-bottom-yellow: #fcf000;

$box-shadow-yellow: rgba(252, 240, 0, 0.53);
$box-shadow-blue: rgba(31, 203, 255, 0.53);
$box-shadow-pink: rgba(246, 43, 253, 0.65);
$box-shadow-red: rgba(255, 0, 0, 0.53);
$box-shadow-black: rgba(0, 0, 0, 0.53);
$box-shadow-green: rgba(54, 214, 174, 0.53);

.wrapper {
  height: 100%;
  width: 100%;

  p {
    margin-top: 6px;
    color: #777777;
    text-align: center;
    font-size: 12px;
  }
}

.textbox {
  height: 20px;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;

  &Face {
    position: absolute;
    background: $linear-gradient-blue;
    left: 0;
  }

  &BottomGradient {
    height: 35px;
    width: 100%;
    bottom: 2px;
    border-radius: 2px;
    transform-origin: 50% 100%;
    transform: perspective(220px) rotateX(50deg);
  }

  &BottomLine {
    width: 100%;
    bottom: 0;
    height: 0px;
    transform-origin: 50% 0;
    border-radius: 2px;
    box-sizing: border-box;
    transition: all 0.25s ease;
    border-style: solid;
    border-width: 0px;
    border-color: transparent;
  }

  &.active {
    .textboxBottomLine {
      border-width: 1px;
      height: 1px;
      background-color: white !important;
      box-shadow: 0px 0px 6px 2px $box-shadow-blue;
      border-radius: 100px;
    }

    &.pink {
      .textboxBottomLine {
        box-shadow: 0px 0px 6px 2px $box-shadow-pink;
      }
    }

    &.yellow {
      .textboxBottomLine {
        box-shadow: 0px 0px 6px 2px $box-shadow-yellow;
      }
    }

    &.red {
      .textboxBottomLine {
        box-shadow: 0px 0px 6px 2px $box-shadow-red;
      }
    }

    &.black {
      .textboxBottomLine {
        box-shadow: 0px 0px 6px 2px $box-shadow-black;
      }

      &.green {
        .textboxBottomLine {
          box-shadow: 0px 0px 6px 2px $box-shadow-green;
        }
      }
    }
  }

  &.pink {
    .textboxFace {
      background: $linear-gradient-pink;
    }
  }

  &.yellow {
    .textboxFace {
      background: $linear-gradient-yellow;
    }
  }

  &.red {
    .textboxFace {
      background: $linear-gradient-red;
    }
  }

  &.black {
    .textboxFace {
      background: $linear-gradient-black;
    }
  }

  &.green {
    .textboxFace {
      background: $linear-gradient-green;
    }
  }
}