@import "../../bootstrap4/variables";
@import "../../bootstrap4/mixins";

// primary
.shine-primary{
  @include diagonal-shine;
  border: 2px solid get-color("primary");
}

.shine-primary:before{
  @include diagonal-shine-before;
  background-color: get-color("primary");
}

.shine-primary:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// warning
.shine-warning{
  @include diagonal-shine;
  border: 2px solid get-color("warning");
}

.shine-warning:before{
  @include diagonal-shine-before;
  background-color: get-color("warning");
}

.shine-warning:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// danger
.shine-danger{
  @include diagonal-shine;
  border: 2px solid get-color("danger");
}

.shine-danger:before{
  @include diagonal-shine-before;
  background-color: get-color("danger");
}

.shine-danger:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// success
.shine-success{
  @include diagonal-shine;
  border: 2px solid get-color("success");
}

.shine-success:before{
  @include diagonal-shine-before;
  background-color: get-color("success");
}

.shine-success:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// info

.shine-info{
  @include diagonal-shine;
  border: 2px solid get-color("info");
}

.shine-info:before{
  @include diagonal-shine-before;
  background-color: get-color("info");
}

.shine-info:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// secondary

.shine-secondary{
  @include diagonal-shine;
  border: 2px solid get-color("secondary");
}

.shine-secondary:before{
  @include diagonal-shine-before;
  background-color: get-color("secondary");
}

.shine-secondary:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

//light
.shine-light{
  @include diagonal-shine;
  border: 2px solid get-color("light");
}

.shine-light:before{
  @include diagonal-shine-before;
  background-color: get-color("light");
}

.shine-light:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

// dark
.shine-dark{
  @include diagonal-shine;
  border: 2px solid get-color("dark");
}

.shine-dark:before{
  @include diagonal-shine-before;
  background-color: get-color("dark");
}

.shine-dark:hover::before{
  animation-name: shine;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes shine{
  to {
    left: 150%;
  }
}