@import "node_modules/bootstrap/scss/buttons";

.btn {
  cursor: pointer;
  border-radius: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;

  &.btn-icon {
    line-height: 0;

    &:hover, &:focus {
      text-decoration: none;
    }
  }

  &.btn-square {
    height: 54px;
    width: 60px;
    padding: 1rem;
    border: 1px solid $border-color;
    border-radius: 0;
    display: block;
    text-align: center;
  }

  &:focus {
    box-shadow: inset 0 0 1px 1px lighten($primary-color-comp, 25%);
  }

  &.btn-link {
    color: $primary-color;

    &:hover, &:focus {
      text-decoration: none;
      color: $primary-color-comp;
    }

    &:focus {
      box-shadow: inset 0 0 1px 1px lighten($primary-color-comp, 25%);
    }
  }

  &.btn-primary {
    color: #fff !important;
    background-color: $primary-color;
    background-image: linear-gradient(to right, $primary-color 0%, $primary-color-comp 100%);
    border-color: $primary-color;

    &:hover {
      background-image: none;
      background-color: $primary-color;
      border-color: $primary-color
    }
  }

  &.btn-danger {
    color: #fff;
    background-color: $danger-color;
    background-image: linear-gradient(to right, $danger-color 0%, $danger-color-comp 100%);
    border-color: $danger-color;

    &:hover {
      background-image: none;
      background-color: $danger-color;
      border-color: $danger-color
    }
  }

  &.btn-uppercase {
    text-transform: uppercase;
    font-size: 0.7rem;
  }

  &.btn-sm {
    i.material-icons {
      font-size: 1rem;
    }
  }

  .btn-loading, &:disabled.btn-loading {
    cursor: progress;
  }
}