@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;
@use 'mixins/button' as *;

$button-types: primary, success, warning, danger;

@include b(button) {
  border-radius: getCssVar('br', 'base');
  font-size: getCssVar('text', 'base');
  height: 40px;
  padding: 0 32px;
  box-sizing: border-box;
  font-weight: getCssVar('text-w', 'm');
  background-color: getCssVar('gray', '3');
  border: 1px solid getCssVar('gray', '3');
  color: getCssVar('text', 'gray', '1');
  line-height: 1;
  user-select: none;
  -webkit-user-select: none;
  white-space: nowrap;

  @include when(disabled) {
    cursor: not-allowed;
    color: getCssVar('text', 'gray', '4');
    &:active {
      background-color: getCssVar('gray', '3');
      border-color: getCssVar('gray', '3');
    }
  }

  @include button-default();

  @include button-style($button-types, getCssVar('text', 'white', '1'));

  @include e('content') {
    display: inline-flex;
    align-items: center;
  }

  @include m(large) {
    height: 48px;
    padding: 0 40px;
  }

  @include m(small) {
    height: 32px;
    font-size: getCssVar('text', 'sm');
    padding: 0 24px;
  }

  @include m(mini) {
    height: 28px;
    font-size: getCssVar('text', 'sm');
    padding: 0 16px;
  }

  @include m(block) {
    display: block;
    width: 100%;
  }

  @include m(round) {
    border-radius: getCssVar('br', 'round');
  }

  @include m(circle) {
    aspect-ratio: 1 / 1;
    padding: 0 !important;
    border-radius: getCssVar('br', 'circle');
  }

  @include e(icon) {
    display: inline;
    vertical-align: middle;

    //animation: icon var(--xzx-duration-fast) var(--xzx-ease-out);
    //transition: all var(--xzx-duration-fast) var(--xzx-ease-out);
  }

  @include e(icon-wrapper) {
    height: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  @include m(mr) {
    margin-right: var(--xzx-padding-base);
  }

  //@keyframes icon {
  //  0% {
  //    width: 0;
  //  }
  //  100% {
  //    width: 1em;
  //  }
  //}
}

@include b(button-group) {
  --xzx-button-group-gap: 6px;
  display: flex;

  @include when(horizontal) {
    @include b(button) {
      margin-right: var(--xzx-button-group-gap);
      margin-left: var(--xzx-button-group-gap);
      &:first-child {
        margin-left: 0;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
  @include when(vertical) {
    flex-direction: column;

    @include b(button) {
      margin-top: var(--xzx-button-group-gap);
      margin-bottom: var(--xzx-button-group-gap);
      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  @include m(reverse) {
    @include when(horizontal) {
      flex-direction: row-reverse;
    }
    @include when(vertical) {
      flex-direction: column-reverse;
      @include b(button) {
        &:first-child {
          margin-top: var(--xzx-button-group-gap);
          margin-bottom: 0;
        }
        &:last-child {
          margin-top: 0;
          margin-bottom: var(--xzx-button-group-gap);
        }
      }
    }
  }
}