@charset "UTF-8";

@import "../vars/colors.css";

.otiom-button {
  --spinner-border-width: 0.2em;
  --background: #FFFFFF;
  --button-ok-color: var(--otiom-green);
  --button-fail-color: var(--otiom-red);
  display: flex;
  align-items: center;
  justify-content: center;
}

.otiom-button:focus,
.otiom-button:hover {
  background-color: var(--button-ok-color) !important;
}

.otiom-button.button--danger:focus,
.otiom-button.button--failure:focus,
.otiom-button.button--danger:hover,
.otiom-button.button--failure:hover {
  background-color: var(--button-fail-color) !important;
}

.otiom-button:focus::before {
  background-color: var(--button-ok-color) !important;
  border: solid var(--spinner-border-width) white;
  color: white;
  border-color: white;
}

.otiom-button.button--loading:focus::before,
.otiom-button.button--loading:hover::before {
  border: solid var(--spinner-border-width) transparent;
  border-bottom-color: var(--background);
}

.otiom-button.button--failure:focus::before,
.otiom-button.button--failure:hover::before {
  background-color: var(--button-fail-color) !important;
}

.button--success::before {
  animation: scale-checkmark 3s ease-in forwards;
  animation-play-state: inherit;
  border: solid var(--spinner-border-width) var(--button-ok-color);
  border-radius: 50%;
  position: absolute;
  color: var(--button-ok-colorn);
  border-color: var(--button-ok-color);
  background-color: transparent;
  height: 2em;
  width: 2em;
  font-family: var(--font-fa-6);
  font-weight: 900;
  align-self: center;
  /*display: inline-block;*/
  will-change: transform;
  content: "\f00c";
  text-align: center;
  line-height: 175%;
}

@keyframes scale-checkmark {
  0% {
    transform: scale(1.0);
    opacity: 1;
  }

  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}

.button--success .btn-text,
.button--failure .btn-text {
  animation: unveil-text 4s ease-in forwards;
  visibility: hidden;
  opacity: 0;
}

@keyframes unveil-text {
  0% {
    visibility: hidden;
    opacity: 0;
  }

  50% {
    visibility: hidden;
    opacity: 0;
  }

  100% {
    visibility: visible;
    opacity: 1;
  }
}

.button--loading .btn-text {
  visibility: hidden;
  opacity: 0;
}

.button--loading::before {
  animation: 1.5s linear infinite confirm-spinner;
  animation-play-state: inherit;
  border: solid var(--spinner-border-width) transparent;
  border-bottom-color: var(--button-ok-color);
  border-radius: 50%;
  height: 2em;
  width: 2em;
  position: absolute;
  align-self: center;
  /*display: inline-block;*/
  will-change: transform;
  content: "";
}

@keyframes confirm-spinner {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


.button--failure::before {
  animation: scale-checkmark 2s ease-in forwards;
  animation-play-state: inherit;
  border: solid var(--spinner-border-width) var(--button-fail-color);
  border-radius: 50%;
  position: absolute;
  color: var(--button-fail-color);
  border-color: var(--button-fail-color);
  background-color: transparent;
  height: 2em;
  width: 2em;
  font-family: var(--font-fa-6);
  font-weight: 900;
  align-self: center;
  /*display: inline-block;*/
  will-change: transform;
  content: "\58";
  text-align: center;
  line-height: 175%;
}

@keyframes scale-checkmark {
  0% {
    transform: scale(1.0);
    opacity: 1;
  }

  100% {
    transform: scale(1.0);
    opacity: 0;
  }
}