@import (reference) "../style/themes/default.less";
@buttonPrefixCls: am-button;
.@{buttonPrefixCls} {
  position: relative;
  box-sizing: border-box;
  height: auto;
  line-height: normal;
  padding: @size-3;
  padding: var(--am-button-padding, @size-3);
  border-radius: @corner-radius-md;
  border-radius: var(--am-button-corner-radius, @corner-radius-md);
  color: @color-fill-grey-dark;
  color: var(--am-button-color, @color-fill-grey-dark);
  border: 0 none;
  box-shadow: inset 0 0 0 @border-width-standard @color-fill-grey-light;
  box-shadow: inset 0 0 0 var(--am-button-border-size, @border-width-standard) var(--am-button-border-color, @color-fill-grey-light);
  background-color: @color-fill-grey-inverse;
  background-color: var(--am-button-background, @color-fill-grey-inverse);
  font-size: @font-size-title;
  font-size: var(--am-button-title-size, @font-size-title);

  &-content {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  &-loading {
    margin-left: 24 * @pixelSize;
  }

  &&-disabled {
    opacity: @opacity-disabled;
    opacity: var(--am-button-disabled-opacity, @opacity-disabled);
    color: @color-fill-grey-dark;
    color: var(--am-button-color, @color-fill-grey-dark);
    background-color: @color-fill-grey-inverse;
    background-color: var(--am-button-background, @color-fill-grey-inverse);
  }

  &-active {
    filter: brightness(0.9);
    > :nth-child(1n + 1) {
      opacity: 0.7;
    }
    .am-button-text& {
      > :nth-child(1n + 1) {
        opacity: 0.6;
      }
    }
  }

  &-subtitle {
    font-size: @font-size-list;
    font-size: var(--am-button-doubleline-title-size, @font-size-list);
    &-subfont {
      font-size: @font-size-subcontent;
      font-size: var(--am-button-subtitle-size, @font-size-subcontent);
      opacity: 0.6;
    }
  }

  &-primary,
  &-primary.@{buttonPrefixCls}-disabled {
    background-color: @color-fill-primary;
    background-color: var(--am-button-primary-background, @color-fill-primary);
    color: @color-text-base;
    color: var(--am-button-primary-color, @color-text-base);
    box-shadow: 0 0 0 0;
  }

  &-ghost,
  &-ghost.@{buttonPrefixCls}-disabled {
    background-color: transparent;
    color: @color-text-primary;
    color: var(--am-button-ghost-color, @color-text-primary);
    box-shadow: inset 0 0 0 @border-width-standard @color-fill-primary;
    box-shadow: inset 0 0 0 var(--am-button-border-size, @border-width-standard) var(--am-button-ghost-border-color, @color-fill-primary);
  }

  &-warn,
  &-warn.@{buttonPrefixCls}-disabled {
    background-color: @color-fill-warning;
    background-color: var(--am-button-warn-background, @color-fill-warning);
    color: @color-text-base;
    color: var(--am-button-warn-color, @color-text-base);
    box-shadow: 0 0 0 0;
  }

  &-warn-ghost,
  &-warn-ghost.@{buttonPrefixCls}-disabled {
    background-color: transparent;
    color: @color-text-warning;
    color: var(--am-button-warn-ghost-color, @color-text-warning);
    box-shadow: inset 0 0 0 @border-width-standard @color-fill-warning;
    box-shadow: inset 0 0 0 var(--am-button-border-size, @border-width-standard) var(--am-button-ghost-border-color, @color-fill-warning);
  }

  &-light,
  &-light.@{buttonPrefixCls}-disabled {
    background-color: @color-fill-primary-light;
    background-color: var(--am-button-light-background, @color-fill-primary-light);
    color: @color-text-primary;
    color: var(--am-button-light-color, @color-text-primary);
    box-shadow: 0 0 0 0;
  }

  &-text,
  &-text.@{buttonPrefixCls}-disabled {
    display: inline-block;
    background-color: transparent;
    color: @color-fill-primary;
    color: var(--am-button-text-color, @color-fill-primary);
    border: 0;
    padding: 0;
    box-shadow: 0 0 0 0;
  }

  &-capsule {
    display: inline-block;
    border-radius: @corner-radius-md;
    border-radius: var(--am-button-capsule-corner, @corner-radius-md);
    padding: @size-1 @size-3;
    padding: var(--am-button-capsule-padding-v, @size-1) var(--am-button-capsule-padding-h, @size-3);
    &-large {
      font-size: @font-size-subtitle;
      font-size: var(--am-button-capsule-size-l, @font-size-subtitle);
      &-minwidth {
        min-width: 168 * @pixelSize;
      }
    }
    &-medium {
      font-size: @font-size-content;
      font-size: var(--am-button-capsule-size-m, @font-size-content);
      &-minwidth {
        min-width: 152 * @pixelSize;
      }
    }
    &-small {
      font-size: @font-size-subcontent;
      font-size: var(--am-button-capsule-size-s, @font-size-subcontent);
      &-minwidth {
        min-width: 144 * @pixelSize;
      }
    }
  }
}
