pussy-landing/src/components/xp/containerGradient/ContainerGradient.module.scss

// TODO: component is need be removed (use Display)

@import './saber/index.module.scss';

@mixin linear-gradient($route) {
  background: linear-gradient(
    $route,
    rgba(0, 0, 0, 0) 0%,
    rgba(var(--color-r), var(--color-g), var(--color-b), 0.11) 100%
  );
}

@mixin styleGradientPseudoEl {
  content: '';
  position: absolute;
  height: 100%;
  width: 100px;
  z-index: 1;
  pointer-events: none;
  top: 0;
  bottom: 0;
}

.containerContainerGradient {
  width: 100%;
  min-height: 50px;
  position: relative;
  padding: 0px;

  @include saber-horizontal('blue');

  &::after {
    @include styleGradientPseudoEl;
    @include linear-gradient(90deg);
    right: 0;
  }

  &::before {
    left: 0;
    @include styleGradientPseudoEl;
    @include linear-gradient(-90deg);
  }

  &Content {
    position: relative;
    margin: 0px;
    padding: 17px 15px;
    min-height: 200px;
    height: 1px;
    transition: 1s ease-in-out;

    &entering {
      opacity: 0;
    }

    &entered {
      opacity: 1;
      height: 1px;
    }

    &exiting {
      opacity: 0;
      transition: 0.5s ease-in-out;
    }

    &exited {
      opacity: 0;
      padding: 0px;
      height: 0px !important;
      min-height: 0px;
      visibility: hidden;
    }
  }
}

@mixin ion-lamp {
  content: '';
  position: absolute;
  background: #ffffff;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  top: 0;
  bottom: 0;
}

.wrapContainerLamp {
  position: relative;

  --color-r: 0;
  --color-g: 0;
  --color-b: 0;

  // reuse colors
  &Default {
    --color-r: 225;
    --color-g: 225;
    --color-b: 225;
  }

  &Red {
    --color-r: 255;
    --color-g: 0;
    --color-b: 0;
  }

  &Green {
    --color-r: 54;
    --color-g: 214;
    --color-b: 174;
  }

  &Blue {
    --color-r: 31;
    --color-g: 203;
    --color-b: 255;
  }

  &Yellow {
    --color-r: 255;
    --color-g: 217;
    --color-b: 0;
  }

  &Pink {
    --color-r: 246;
    --color-g: 43;
    --color-b: 253;
  }
}

.wrapContainerLamp {
  &::before {
    left: 0;
  }

  &::after {
    right: 0;
  }

  &::before,
  &::after {
    @include ion-lamp;
  }
}

.containerGradientText {
  width: 100%;
  min-height: 50px;
  position: relative;
  padding: 0px 5px;
  height: 100%;

  &::after,
  &::before {
    @include styleGradientPseudoEl;
  }

  &::after {
    @include linear-gradient(90deg);
    right: 0;
  }

  &::before {
    left: 0;
    @include linear-gradient(-90deg);
  }

  &Content {
    position: relative;
    margin: 0px -5px;
    padding: 15px;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.togglingDisable {
  .containerContainerGradientTitle {
    cursor: default;
  }

  .containerContainerGradientContent {
    height: auto;
  }
}

.titleTogglingActive {
  cursor: pointer;
}

// TODO: remove
.containerTxs {
  width: 100%;
  padding: 15px;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 15px;

  &TxHash {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 1;
  }

  &RawLog {
    position: relative;
    z-index: 1;
  }

  &Confirmed {
    position: relative;

    &::before {
      @include styleGradientPseudoEl;
      @include linear-gradient(-90deg);
      left: 0;
      opacity: 11%;
    }

    &::after {
      @include styleGradientPseudoEl;
      @include linear-gradient(90deg);
      right: 0;
      opacity: 11%;
    }
  }

  &Pending {
    position: relative;

    &::before {
      @include styleGradientPseudoEl;
      @include linear-gradient(-90deg);
      left: 0;
      opacity: 12%;
    }

    &::after {
      @include styleGradientPseudoEl;
      @include linear-gradient(90deg);
      right: 0;
      opacity: 12%;
    }
  }

  &Danger {
    position: relative;

    &::after {
      @include styleGradientPseudoEl;
      @include linear-gradient(90deg);
      right: 0;
      opacity: 11%;
    }

    &::before {
      @include styleGradientPseudoEl;
      @include linear-gradient(-90deg);
      left: 0;
      opacity: 11%;
    }
  }
}