.scifi-button {
  /* == BUTTON SETTINGS == */
  --font-family: 'WhiteRabbit';
  --font-size: 16px;
  --color:  white ;
  --hover-color: cyan;
  --background-color:  rgba(0, 0, 0, 0.9);
  --border-color: #00AFB9;
  --border-width: 1px;
  --border-cut:4px;
  --button-shape: polygon(0 var(--border-cut), var(--border-cut) 0, calc(50% - var(--border-cut) - 10px) 0%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut)) var(--border-cut), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px) var(--border-cut), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px + var(--border-cut)) 0, calc(100% - var(--border-cut)) 0, 100% var(--border-cut), 100% calc(50% - var(--border-cut) - 5px), 100% calc(100% - var(--border-cut)), calc(100% - var(--border-cut)) 100%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px + var(--border-cut)) 100%, calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut) + 20px) calc(100% - var(--border-cut)), calc(calc(50% - var(--border-cut) - 10px) + var(--border-cut)) calc(100% - var(--border-cut)), calc(calc(50% - var(--border-cut) - 10px)) 100%, var(--border-cut) 100%, 0 calc(100% - var(--border-cut)));
}

.scifi-button {
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--color) !important;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  align-self: center;
  vertical-align: middle;
  appearance: none;
  box-sizing: border-box;
  text-decoration: none;
  position: relative;
  xword-spacing: 3px;
  xletter-spacing: 0.4px;
  cursor: pointer;
  transition: 0.3s;
  line-height: initial;
  min-height: 20px;
  min-width: 70px;
  white-space: nowrap;
  z-index: 1;
  user-select: none;
  outline: 0;
  padding: 10px 20px;
  background-color: transparent;
}

.scifi-button:hover {
    color: var(--hover-color) !important;
    border-color: red !important;
}

.scifi-button > .icon {
    aspect-ratio: 1/1;
    width: 20px;
    height:20px;
    margin-right: 10px;
    xfilter: sepia(1) hue-rotate(140deg) saturate(500%) brightness(0.8);
    border-radius: 100%;
    box-shadow: 0px 0px 1px 1px black, 0px 0px 2px 2px cyan;
    display: flex;
    align-items: center;
    justify-content: center;

    color: cyan;
}

.scifi-button > .icon > i {
  xwidth: 100%;
  xheight: 100%;
  opacity: 0.8;
}

.scifi-button.off > .icon {
  xcolor: red;
  
}

.scifi-button:before,
.scifi-button:after{
  content: '';
  inset: 0;
  background: var(--border-color);
  position: absolute;
  z-index: -1;
  clip-path: var(--button-shape);
  box-shadow: inset 0 0 25px -10px var(--border-color);
}

.scifi-button:after{
  inset: var(--border-width);
  background: var(--background-color);
}

.scifi-button helper-1{
  content: '';
  position: absolute;
  inset: calc(var(--border-cut) /2);
  background: var(--border-color);
  z-index: -2;
}

[class*='scifi-button'].disabled,
[class*='scifi-button']:disabled{
  pointer-events:none;
  opacity:0.5;
  cursor:default;
}


/* Ripple Animation */
[class*='scifi-button'] ripple {
  inset: 0;
  position: absolute;
  overflow: hidden;
  -webkit-clip-path: var(--button-shape);
          clip-path: var(--button-shape);
}

[class*='scifi-button'].disabled ripple,
[class*='scifi-button']:disabled ripple{
  display:none
}

[class*='scifi-button'] ripple:after {
  content: '';
  --ripple-gradient: rgb(255, 255, 255);
  position: absolute;
  inset: 0 auto 0 -200%;
  width: 200%;
  transform: skewX(-20deg);
  opacity: 0.5;
  background-image: linear-gradient(to right, transparent, var(--ripple-gradient), transparent);
}

[mode*='light'] ripple:after {
  --ripple-gradient: var(--border-color);
}

[class*='scifi-button']:hover ripple:after {
  left: 200%;
  transition: 1.6s ease;
}

[class*='scifi-button'] ripple:before {
  content: '';
  --ripple-color: rgb(255, 255, 255);
  position: absolute;
  inset: 50%;
  transform: skewX(-10deg);
  border-radius: 100vh;
}

[mode*='light'] ripple:before {
  --ripple-color: var(--border-color);
}

[class*='scifi-button']:focus ripple:before {
  animation: ripple-animation 0.7s ease-in-out forwards;
}

[class*='scifi-button']:active ripple:before {
  animation: unset;
}

@keyframes ripple-animation {
  0% {box-shadow: 0 0 0 0 var(--ripple-color); opacity:0.6}
  100% {box-shadow: 0 0 0 150px var(--ripple-color); opacity:0}
}


/* Shine Animation */
[class*='scifi-button'] shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-clip-path: var(--button-shape);
          clip-path: var(--button-shape);
}

[class*='scifi-button'].disabled shine,
[class*='scifi-button']:disabled shine {
  display: none;
}

[class*='scifi-button'] shine:after {
  content: '';
  position: absolute;
  inset: 0 auto 0 -70px;
  width: 30px;
  opacity: 0.8;
  background: rgb(255, 255, 255);
  transition: all .3s linear;
  transform: skewX(-15deg) translateX(0);
  animation: shine 3.5s ease-in-out infinite;
}

[mode*='light'] shine:after {
  opacity: 0.5;
  background: var(--border-color);
}

[class*='scifi-button']:hover shine:after {
  animation: unset;
}

@keyframes shine {
  70% {left: -70px}
  100% {left: calc(100% + 70px)}
}