@import "./mixins/bem-mixin";
@import "./common/variable";

@include b(button) {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: none;
  padding: 6px 12px;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  @each $member in (primary, info, success, danger, warning) {
    @include m($member) {
      background-color: map_get($button-color-map, #{$member}-background);
      color: map_get($button-color-map, #{$member}-font);
      border: 1px solid map_get($button-color-map, #{$member}-border);
      @include pseudo(hover) {
        background-color: lighten(map_get($button-color-map, #{$member}-background), 5%);
        border: 1px solid lighten(map_get($button-color-map, #{$member}-background), 5%);
      }
      @include when(outline) {
        border: 1px solid map_get($button-color-map, #{$member}-background);
        color: map_get($button-color-map, #{$member}-background);
        background-color: #fff;
        @include pseudo(hover) {
          background-color: map_get($button-color-map, #{$member}-background);
          color: #fff;
        }
      }
    }
  }

  @each $member in (xsmall, small, normal, large, xlarge) {
    @include m($member) {
      padding: map_get($button-size-map, $member);
    }
  }
  @include m(disabled) {
    opacity: .65;
    cursor: not-allowed;
  }
}


@include b(button-group) {
  letter-spacing: -1000px;
  & .lanaya-button {
    border-radius: 0;

    &.is-outline {
      &:not(:first-child) {
        border-left: none;
      }
    }

    &:not(:first-child) {
      border-left: 1px solid #fff;
    }

    &:first-child {
      border-bottom-left-radius: 3px;
      border-top-left-radius: 3px;
    }

    &:last-child {
      border-bottom-right-radius: 3px;
      border-top-right-radius: 3px;
    }
  }
}