.btn {
  display: inline-block;
  position: relative;
  text-align: center;
  transition-duration: 0.3s;
  transition-timing-function: ease;
  transition-property: filter;
  cursor: pointer;
  border: none;
  text-decoration: none;
  outline-style: none;
  width: fit-content;
  height: fit-content;
  font-size: 1.2rem;
  padding: calc(0.6rem + 2px) 1.25rem;
  overflow: hidden;
  word-wrap: normal;

  &[class*='hoverable-'],
  &[class*='light-hoverable-'] {
    &:not(.btn-press),
    &:not(.btn-outline) {
      transition-property: filter, transform, box-shadow !important;
    }
  }

  &:hover:not(.btn-outline),
  &.active:not(.btn-outline) {
    filter: brightness(115%);
  }

  &.btn-small {
    font-size: 1rem;
    padding: calc(0.45rem + 2px) 1rem;
  }

  &.btn-large {
    font-size: 1.4rem;
    padding: calc(1rem + 2px) 1.5rem;
  }

  &.btn-press {
    transition: 0.1s ease;
    transition-property: box-shadow, transform, filter;
    box-shadow: inset 0 -0.5rem 0 -0.25rem rgba(0, 0, 0, 0.25);

    &:active {
      box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0.25);
      transform: translateY(2px);
    }
  }

  &.btn-circle {
    padding: 0;
    font-size: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
    line-height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;

    i {
      position: absolute;
      transform: translate(-50%, -50%);
      top: 50%;
      left: 50%;
    }

    &.btn-small {
      font-size: 0.9rem;
      width: 2rem;
      height: 2rem;
      line-height: 2rem;
    }

    &.btn-large {
      font-size: 1.8rem;
      width: 3.6rem;
      height: 3.6rem;
      line-height: 3.6rem;
    }
  }

  &.disabled,
  &[disabled] {
    pointer-events: none;
    background-color: var(getCssVar(btn-disabled-bg-color)) !important;
    color: var(getCssVar(btn-disabled-color)) !important;
    box-shadow: none;

    &.btn-outline {
      border-color: var(getCssVar(btn-disabled-bg-color));
    }
  }

  &.btn-outline {
    background-color: transparent;
    border: 2px solid currentColor;
    padding: 0.6rem calc(1.25rem - 2px);

    &.btn-circle {
      .btn-outline-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    &.btn-small {
      padding: 0.45rem calc(1rem - 2px);
    }

    &.btn-large {
      padding: 1rem calc(1.5rem - 2px);
    }

    .btn-outline-text {
      transition: color 0.3s ease;
    }

    &::before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      opacity: 0;
      transition-duration: 0.3s;
      transition-timing-function: ease;
      transition-property: opacity;
      background-color: currentColor;
      z-index: -2;

      @media not all and (min-resolution: 0.001dpcm) {
        @supports (-webkit-appearance: none) {
          border-radius: inherit;
        }
      }
    }

    &:hover,
    &.active {
      animation-name: fix-outline-button;
      animation-delay: 0.001s;
      animation-fill-mode: forwards;

      .btn-outline-text {
        color: #fff !important;
        &.btn-outline-invert {
          color: #000 !important;
        }
      }
      &::before {
        opacity: 1;
      }
    }

    &.btn-opening {
      &::before {
        left: 50%;
        right: 50%;
        transition-property: opacity, left, right;
        border-radius: inherit;
      }

      &:hover {
        animation-delay: 0.29s;

        &::before {
          left: 0;
          right: 0;
        }
      }
    }
  }
}

@keyframes fix-outline-button {
  from {
    background-color: transparent;
  }
  to {
    background-color: currentColor;
  }
}