/* =================================== */
/*    Buttons
/* =================================== */
.btn {
  background: $colorblue;
  text-transform: capitalize;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 1px;
  line-height: 0;
  padding: 30px 44px;
  border-radius: 5px;
  transition: color 0.4s linear;
  position: relative;
  z-index: 1;
  border: 0;
  overflow: hidden;
  &::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: $colorred;
    z-index: 1;
    border-radius: 5px;
    transition: transform 0.5s;
    transition-timing-function: ease;
    transform-origin: 0 0;
    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
    @include transform(scaleX(0));
  }
  &:hover {
    color: #fff;
    &::before {
      @include transform(scaleX(1));
      color: #fff !important;
      z-index: -1;
    }
  }
  &:focus {
    outline: 0;
    box-shadow: none;
  }
}

.radius-btn {
  padding: 25px 43px;
  border-radius: 30px;
}
