@import '../../assets/styles/vars';

/* stylelint-disable max-nesting-depth */
:global {
  .btn-default {
    color: #fff;
  }

  .btn-primary,
  .btn,
  .btn-lg,
  .btn-md,
  .btn-sm,
  .btn-xs {
    color: $blue;
  }

  .btn-warn {
    color: $yellow;
  }

  .btn-danger {
    color: $red;
  }

  .btn-success {
    color: $green;
  }

  .btn-royal {
    color: $purple;
  }

  .btn,
  .btn-lg,
  .btn-md,
  .btn-sm,
  .btn-xs {
    background: transparent;
    border-color: transparent;
    border-width: 0;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    padding: 0;
    position: relative;
  }

  .btn-lg {
    font-family: inherit;
    font-size: 2.2rem;
    padding: 0.62vw 1.15vw;
  }

  .btn-md {
    font-family: inherit;
    font-size: 2rem;
    padding: 0.38vw 0.92vw;
  }

  .btn-sm {
    font-family: inherit;
    font-size: 1.8rem;
    padding: 0.31vw 0.77vw;
  }

  .btn-xs {
    font-family: inherit;
    font-size: 1.6rem;
    padding: 0.23vw 0.62vw;
  }

  @keyframes :global(ripple) {
    0% {
      opacity: 1;
      transform: scale(0, 0);
    }

    20% {
      opacity: 1;
      transform: scale(25, 25);
    }

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

  .btn-flat {
    background: transparent;
    background: #fff;
    border-color: transparent;
    border-radius: 2px;
    border-width: 0;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 1px 5px 0 rgba(0, 0, 0, 0.15);
    color: $blue;
    cursor: pointer;
    font-family: inherit;
    font-size: 2rem;
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    padding: 0.38vw 0.92vw;
    position: relative;
    text-transform: uppercase;
    transform: translate3d(0, 0, 0);
    transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);

    &:hover,
    &:focus {
      box-shadow: 0 5px 11px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
      outline: 0;
      transition: box-shadow 0.4s ease-out;
    }

    &::after {
      background: rgba(255, 255, 255, 0.5);
      border-radius: 100%;
      content: '';
      height: 5px;
      left: 50%;
      opacity: 0;
      position: absolute;
      top: 50%;
      transform: scale(1, 1) translate(-50%);
      transform-origin: 50% 50%;
      width: 5px;
    }

    &:focus:not(:active)::after {
      animation: ripple 1s ease-out;
    }

    &.btn-xs {
      font-family: inherit;
      font-size: 1.6rem;
      padding: 0.23vw 0.62vw;
    }

    &.btn-sm {
      font-family: inherit;
      font-size: 1.8rem;
      padding: 0.31vw 0.77vw;
    }

    &.btn-md {
      font-family: inherit;
      font-size: 2rem;
      padding: 0.304vw 0.763vw;
    }

    // TODO: Add more media query on button size
    @media all and (max-width: $break-point) {
      &.btn-md {
        padding: 1vw 3vw;
      }
    }

    &.btn-lg {
      font-family: inherit;
      font-size: 2.2rem;
      padding: 0.62vw 1.15vw;
    }

    &.btn-default {
      background: #fff;
      color: $blue;

      &::after {
        background: rgba(29, 137, 255, 0.5);
      }
    }

    &.btn-primary {
      background: $blue;
      color: #fff;
    }

    &.btn-warn {
      background: $yellow;
      color: #fff;

      &::after {
        background: rgba(254, 171, 58, 0.5);
      }
    }

    &.btn-danger {
      background: $red;
      color: #fff;

      &::after {
        background: rgba(255, 89, 100, 0.5);
      }
    }

    &.btn-success {
      background: $green;
      color: #fff;

      &::after {
        background: rgba(40, 183, 141, 0.5);
      }
    }

    &.btn-royal {
      background: $purple;
      color: #fff;

      &::after {
        background: rgba(189, 45, 245, 0.5);
      }
    }
  }
}
