@use "variables";

// main: style.scss

/* Button
------------------------------*/
.btn {
    text-transform: uppercase;
    @include variables.border-radius(2px);
    box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.1) inset;
    @include variables.rem('font-size', 13px);
    font-weight: 600;
    &:active, &:focus {
        outline: none;
    }

    &.btn-secondary-outline {
        box-shadow: none;
        border-color: rgba(255, 255, 255, 0.9);
        color: rgba(255, 255, 255, 0.9);
        &:hover {
            background: #FFF;
            color: #333;
        }
    }
}

.btn-lg {
    @include variables.rem('font-size', 17px);
}

.btn-theme-primary {
    background: variables.$primary;
    color: #FFFFFF;
    &:hover {
        color: #FFFFFF;
    }
}
.btn-theme-primary-outline {
    background-color: transparent;
    background-image: none;
    border-color: variables.$primary;
    color: variables.$primary;
    &:hover {
        color: #FFF;
        background-color: variables.$primary;
        border-color: variables.$primary;
    }
}


/* Loading
------------------------------*/
.slider-spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
  animation: sk-bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes sk-bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bounce {
  0%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 50% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}


/* WP 4.7 Shortcut */
section > .customize-partial-edit-shortcut {
    z-index: 95;
    button {
        left: 30px;
    }
}