@import "var";

.@{prefixName}-button {
  position: relative;
  display: flex;
  font-weight: @button-text-font-weight;
  line-height: @button-lg-height;
  width: auto !important;
  min-height: 0 !important;
  padding: 0 @button-lg-padding-horizontal;
  margin-left: 0;
  margin-right: 0;
  border-radius: @button-border-radius;
  align-items: center;
  justify-content: center;

  &::after {
    .border(1px, @button-default-border-color, @button-border-radius);
  }


  &.size {
    &-sm {
      display: inline-flex;
      font-size: @button-sm-text-size;
      line-height: @button-sm-height;
      min-height: @button-sm-height !important;
      padding: 0 @button-sm-padding-horizontal;
    }
    &-md {
      display: inline-flex;
      font-size: @button-md-text-size;
      line-height: @button-md-height;
      min-height: @button-md-height !important;
      padding: 0 @button-md-padding-horizontal;
    }
    &-lg {
      font-size: @button-lg-text-size;
      min-height: @button-lg-height !important;
    }
  }


  &--primary {
    &::after {
      border-color: @button-primary-border-color;
    }
  }
  &--secondary {
    &::after {
      border-color: @button-secondary-border-color;
    }
  }
  &--success {
    &::after {
      border-color: @button-success-border-color;
    }
  }
  &--warning {
    &::after {
      border-color: @button-warning-border-color;
    }
  }
  &--danger {
    &::after {
      border-color: @button-danger-border-color;
    }
  }

  &--solid {
    &.@{prefixName}-button--default {
      color: @button-default-solid-text-color;
      background-color: @button-default-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-default-hover-background-color;
      }

      &.is-disabled {
        color: @button-default-solid-text-color;
        background-color: @button-default-disabled-background-color;
        opacity: .5;
        &::after {
          border-color: @button-default-disabled-border-color;
        }
      }
    }

    &.@{prefixName}-button--primary {
      color: @button-primary-solid-text-color;
      background-color: @button-primary-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-primary-hover-background-color;
        &::after {
          border-color: @button-primary-hover-border-color;
        }
      }

      &.is-disabled {
        color: @button-primary-solid-text-color;
        background-color: @button-primary-disabled-background-color;
        &::after {
          border-color: @button-primary-disabled-border-color;
        }
      }
    }

    &.@{prefixName}-button--secondary {
      color: @button-secondary-solid-text-color;
      background-color: @button-secondary-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-secondary-hover-background-color;
        &::after {
          border-color: @button-secondary-hover-border-color;
        }
      }

      &.is-disabled {
        color: @button-secondary-solid-text-color;
        background-color: @button-secondary-disabled-background-color;
        &::after {
          border-color: @button-secondary-disabled-border-color;
        }
      }
    }
    &.@{prefixName}-button--success {
      color: @button-success-solid-text-color;
      background-color: @button-success-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-success-hover-background-color;
        &::after {
          border-color: @button-success-hover-border-color;
        }
      }

      &.is-disabled {
        color: @button-success-solid-text-color;
        background-color: @button-success-disabled-background-color;
        &::after {
          border-color: @button-success-disabled-border-color;
        }
      }
    }
    &.@{prefixName}-button--warning {
      color: @button-warning-solid-text-color;
      background-color: @button-warning-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-warning-hover-background-color;
        &::after {
          border-color: @button-warning-hover-border-color;
        }
      }

      &.is-disabled {
        color: @button-warning-solid-text-color;
        background-color: @button-warning-disabled-background-color;
        &::after {
          border-color: @button-warning-disabled-border-color;
        }
      }
    }
    &.@{prefixName}-button--danger {
      color: @button-danger-solid-text-color;
      background-color: @button-danger-background-color;

      &.@{prefixName}-button--hover {
        background-color: @button-danger-hover-background-color;
        &::after {
          border-color: @button-danger-hover-border-color;
        }
      }

      &.is-disabled {
        color: @button-danger-solid-text-color;
        background-color: @button-danger-disabled-background-color;
        &::after {
          border-color: @button-danger-disabled-border-color;
        }
      }
    }
  }

  &--outline {
    background-color: @button-outline-background-color;

    &.@{prefixName}-button--default {
      color: @button-default-text-color;
    }
    
    &.@{prefixName}-button--primary {
      color: @button-primary-text-color;
      &::after {
        border-color: @button-primary-border-color;
      }
    }

    &.@{prefixName}-button--secondary {
      color: @button-secondary-text-color;
      &::after {
        border-color: @button-secondary-border-color;
      }
    }

    &.@{prefixName}-button--success {
      color: @button-success-text-color;
      &::after {
        border-color: @button-success-border-color;
      }
    }

    &.@{prefixName}-button--warning {
      color: @button-warning-text-color;
      &::after {
        border-color: @button-warning-border-color;
      }
    }

    &.@{prefixName}-button--danger {
      color: @button-danger-text-color;
      &::after {
        border-color: @button-danger-border-color;
      }
    }

    &.@{prefixName}-button--hover {
      opacity: .6;
    }
  }


  &.is-disabled, 
  &.is-loading {
    pointer-events: none;
  }


  &__loading {
    display: inline-flex;

    &-text {
      margin-left: @button-loading-text-margin-left;
    }
  }
}