@import './mixins/mixins.scss';
@import './theme/default.scss';

@include b(button) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 0 1.5px $default-button-border-color;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  &.n-button--large-size {
    font-size: 16px;
    height: 40px;
    border-radius: 6px;
    padding: 0 24px;
    &.is-round {
      border-radius: 20px
    }
    .n-button__icon {
      height: 22px;
      margin-right: 6px;
      & > i::before {
        color: #63E2B7FF;
        font-size: 22px;
      }
    }
  }
  &.n-button--small-size {
    font-size: 14px;
    height: 28px;
    border-radius: 6px;
    padding: 0 18px;
    &.is-round {
      border-radius: 14px
    }
    .n-button__icon {
      height: 18px;
      margin-right: 6px;
      & > i::before {
        font-size: 18px;
      }
    }
  }
  &.n-button--default-size, &.n-button--medium-size {
    font-size: 16px;
    height: 34px;
    border-radius: 6px;
    padding: 0 24px;
    &.is-round {
      border-radius: 17px
    }
    .n-button__icon {
      height: 20px;
      margin-right: 6px;
      & > i::before {
        font-size: 22px;
      }
    }
  }
  
  &.is-default {
    color: $default-button-text-color;
    &:hover {
      background-color: #336F6FFF;
    }
    &:active {
      background-color: #366165FF;
    }
  }
  &.is-primary {
    color: #1F263EFF;
    background: #63E2B7FF;
    box-shadow: none;
    &:hover {
      background-color: #6FF7C9FF;
    }
    &:active {
      background-color: #4DB199FF;
    }
  }
  .n-button__icon {
    height: 18px;
    margin-right: 6px;
    & > i::before {
      color: #63E2B7FF;
      font-size: 18px;
    }
  }
  // .n-button__content, .n-button__icon {
  //   margin-top: -1px;
  // }
}