button {
  font-family: $font-family-base;
  font-weight: $btn-font-weight;
  border: 2px solid transparent;
  transition: $transition-base;
  cursor: pointer;
  font-size: 1rem;
  user-select: none;
  margin: 5px 0;

  &[disabled] {
    filter: grayscale(100%);
    opacity: 0.5;
    cursor: not-allowed;
  }

  &.small {
    font-size: 0.8rem;

    span {
      font-size: 0.8rem;
    }

    i {
      font-size: 1.2rem;
    }
  }

  &:active,
  &.active {
    outline: 0;
    border-color: transparent;
  }

  span {
    font-family: $font-family-base;
    font-weight: $btn-font-weight;
    font-size: 1rem;
  }

  i {
    font-style: normal;
    font-size: 1.5rem;

    &:before {
      transition: $transition-base;
    }
  }

  //
  // Icon round
  //

  &.icon-round {
    background-color: $primary;
    border-radius: 100%;
    padding:0;
    height: 40px;
    width: 40px;

    &.primary {
      background-color: $primary;

      i:before {
        color: $light;
      }

      &:hover:not([disabled]) {
        background-color: $primary-100;
      }

      &:active,
      &.active {
        background-color: $primary-300;
      }
    }

    &.ghost {
      background-color: transparent;

      i:before {
        color: $gray-300;
      }

      &:hover:not([disabled]) {
        i:before {
          color: $dark;
        }
      }

      &:active,
      &.active {
        background-color: $gray-300;

        i:before {
          color: $primary;
        }
      }
    }
  }

  //
  // Square
  //

  &.square {
    padding: 5px 10px;
    display: flex;
    align-items: center;
    line-height: $line-height-base;

    &.primary {
      background-color: $primary;
      color: $light;

      &:hover:not([disabled]) {
        background-color: $primary-100;
      }

      &:active,
      &.active {
        background-color: $primary-300;
      }
    }

    &.warning {
      background-color: $warning;
      color: $light;

      &:hover:not([disabled]) {
        background-color: $warning;
      }

      &:active,
      &.active {
        background-color: $warning;
      }
    }

    &.info {
      background-color: $info;
      color: $light;

      &:hover:not([disabled]) {
        background-color: $info;
      }

      &:active,
      &.active {
        background-color: $info;
      }
    }

    &.danger {
      background-color: $danger;
      color: $light;

      &:hover:not([disabled]) {
        background-color: $danger-100;
      }

      &:active,
      &.active {
        background-color: $danger-300;
      }
    }

    &.ghost {
      background-color: transparent;
      color: $gray-300;

      &:hover:not([disabled]) {
        color: $dark;
      }

      &:active,
      &.active {
        background-color: $gray-300;
        color: $primary;
      }
    }
  }

  //
  // Icon square
  //

  &.icon-square {
    padding: 5px 10px;
    display: flex;
    align-items: center;

    i {
      font-style: normal;
    }

    span {
      padding: 0 0 0 15px;
      margin: 0;
      line-height: $line-height-base;
    }

    &.primary {
      background-color: $primary;

      i:before,
      span {
        color: $light;
      }

      &:hover:not([disabled]) {
        background-color: $primary-100;
      }

      &:active,
      &.active {
        background-color: $primary-300;
      }
    }

    &.ghost {
      background-color: transparent;

      i:before,
      span {
        color: $gray-300;
      }

      &:hover:not([disabled]) {
        i:before,
        span {
          color: $dark;
        }
      }

      &:active,
      &.active {
        background-color: $gray-300;

        i:before,
        span {
          color: $primary;
        }
      }
    }
  }

  //
  // Border Square
  //

  &.border-square {
    background-color: transparent;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    border: 2px solid;
    line-height: $line-height-base;

    &.primary {
      border-color: $primary;
      color: $primary;

      &:hover:not([disabled]) {
        background-color: $primary-100;
        color: $light;
      }

      &:active,
      &.active {
        background-color: $primary-300;
        color: $light;
      }
    }

    &.ghost {
      border-color: $gray-300;
      color: $gray-300;

      &:hover:not([disabled]) {
        border-color: $dark;
        color: $dark;
      }

      &:active,
      &.active {
        background-color: $gray-300;
        border-color: $primary;
        color: $primary;
      }
    }
  }

  //
  // Border Icon Square
  //

  &.border-icon-square {
    background-color: transparent;
    padding: 5px 10px;
    display: flex;
    align-items: center;
    border: 2px solid;

    i {
      font-style: normal;
    }

    span {
      padding: 0 0 0 15px;
      margin: 0;
      line-height: $line-height-base;
    }

    &.primary {
      border-color: $primary;

      i:before,
      span {
        color: $primary;
      }

      &:hover:not([disabled]) {
        background-color: $primary-100;

        i:before,
        span {
          color: $light;
        }
      }

      &:active,
      &.active {
        background-color: $primary-300;

        i:before,
        span {
          color: $light;
        }
      }
    }

    &.ghost {
      border-color: $gray-300;

      i:before,
      span {
        color: $gray-300;
      }

      &:hover:not([disabled]) {
        border-color: $dark;

        i:before,
        span {
          color: $dark;
        }
      }

      &:active,
      &.active {
        background-color: $gray-300;
        border-color: $primary;

        i:before,
        span {
          color: $primary;
        }
      }
    }
  }
}