@import '../../style/vars';

@buttonPrefixCls: pptmui-button;

.@{buttonPrefixCls} {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  border: none;

  &:focus {
    outline: none;
  }

  &--default {
    color: @button-default-color;
    background: @button-default-bg-color;
    border: @button-border-width solid @button-default-border-color;

    &.@{buttonPrefixCls}--active {
      color: @button-default-color-active;
      background: @button-default-bg-color-active;
      border: @button-border-width solid @button-default-border-color-active;
    }

    &.@{buttonPrefixCls}--shadow {
      box-shadow: @button-shadow-default-box-shadow;
    }

    &.@{buttonPrefixCls}--active&.@{buttonPrefixCls}--shadow {
      box-shadow: @button-shadow-default-box-shadow-active;
    }
  }

  &--success {
    color: @button-success-color;
    background: @button-success-bg-color;
    border: @button-border-width solid @button-success-border-color;

    &.@{buttonPrefixCls}--active {
      color: @button-success-color-active;
      background: @button-success-bg-color-active;
      border: @button-border-width solid @button-success-border-color-active;
    }

    &.@{buttonPrefixCls}--shadow {
      box-shadow: @button-shadow-success-box-shadow;
    }

    &.@{buttonPrefixCls}--active&.@{buttonPrefixCls}--shadow {
      box-shadow: @button-shadow-success-box-shadow-active;
    }
  }

  &--orange {
    color: @button-orange-color;
    background: @button-orange-bg-color;

    &.@{buttonPrefixCls}--active {
      color: @button-orange-color-active;
      background: @button-orange-bg-color-active;
    }
  }

  &--blue {
    color: @button-blue-color;
    background: @button-blue-bg-color;

    &.@{buttonPrefixCls}--active {
      color: @button-blue-color-active;
      background: @button-blue-bg-color-active;
    }
  }

  &--disabled {
    opacity: @button-disabled-opacity;
    box-shadow: none;
    cursor: not-allowed;
  }

  &--medium {
    height: @button-medium-height;
    font-size: @button-medium-font-size;
    padding: @button-medium-padding;

    &.@{buttonPrefixCls}--round {
      border-radius: @button-medium-border-radius;
    }
  }

  &--small {
    height: @button-small-height;
    font-size: @button-small-font-size;
    padding: @button-small-padding;

    &.@{buttonPrefixCls}--round {
      border-radius: @button-small-border-radius;
    }
  }

  &--large {
    height: @button-large-height;
    font-size: @button-large-font-size;
    padding: @button-large-padding;

    &.@{buttonPrefixCls}--round {
      border-radius: @button-large-border-radius;
    }
  }

  &--block {
    display: block;
    width: 100%;
    height: @button-block-height;
    font-size: @button-block-font-size;

    &.@{buttonPrefixCls}--round {
      border-radius: @button-block-border-radius;
    }
  }

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;

    &::before {
      content: ' ';
    }
  }
}