@import "../vars.less";

.hive-button {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .3s;
  user-select: none;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  padding: 7px 24px;
  font-size: 14px;
  line-height: 24 / 14;
  border-radius: 0px;
  color: @text-color;
  border-color: @border-color;
  background-color: #fff;
  outline: none;
  -webkit-appearance: none;

  .hive-icon {
    vertical-align: middle;
  }

  >.hive-icon+span {
    margin-left: 8px;
  }
  &>span+.hive-icon {
    margin-left: 8px;
  }

  &+.hive-button {
    margin-left: 10px;
  }
}

// size
.hive-button--size {
  &-default {
    min-width: 120px;
    padding: 7px 24px;
    height: @button-height-default;
    border-radius: @button-border-radius-default;
    .hive-icon {
      font-size: 20px;
      line-height: 1;
    }
  }
  &-large {
    min-width: 160px;
    height: @button-height-large;
    padding: 14px 32px;
    font-size: 20px;
    line-height: 34 / 20;
    border-radius: @button-border-radius-large;
    .hive-icon {
      font-size: 28px;
      line-height: 1;
    }
  }
  &-small {
    min-width: 104px;
    padding: 5px 18px;
    height: @button-height-small;
    font-size: 14px;
    line-height: 20 / 14;
    border-radius: @button-border-radius-small;
    .hive-icon {
      font-size: 16px;
      line-height: 1;
    }
  }
}

.hive-button--autowidth {
  &[class*='hive-button--size'] {
    min-width: auto;
  }
}

// circle 
.hive-button--round {
  &.hive-button--size {
    &-default {
      height: 40px;
      border-radius: 20px;
    }

    &-large {
      height: 64px;
      border-radius: 32px;
    }

    &-small {
      height: 32px;
      border-radius: 16px;
    }
  }

  &.hive-button--notext {
    min-width: initial;
    padding-left: 0;
    padding-right: 0;
    &.hive-button--size {
      &-default {
        width: 40px;
      }
  
      &-large {
        width: 64px;
      }
  
      &-small {
        width: 32px;
      }
    }
  }
}

.hive-button--type {
  &-primary {
    color: #fff;
    background-color: @primary-color;
    border-color: @primary-color;

    &:hover,
    &:focus {
      background-color: lighten(@primary-color, 20%);
      border-color: lighten(@primary-color, 20%);
    }

    &:active {
      background-color: darken(@primary-color, 20%);
      border-color: darken(@primary-color, 20%);
      color: darken(#fff, 20%);
    }

    &.hive-button--disabled {
      color: #fff;
      background-color: @disabled-color;
      border-color: @disabled-color;
    }
  }

  &-default {
    color: @text-color-lighter-1;
    background-color: none;
    border-color: @border-color;

    &:hover,
    &:focus {
      color: @primary-color;
      border-color: @primary-color;
    }

    &:active {
      color: darken(@primary-color, 20%);
      border-color: darken(@primary-color, 20%);
    }

    &.hive-button--disabled {
      color: @disabled-color;
      background-color: #f5f5f5;
      border-color: @disabled-color;
    }
  }

  &-text {
    background: transparent;
    border-color: transparent;
    min-width: auto;
    color: @primary-color;
    &:hover,
    &:focus {
      color: lighten(@primary-color, 20%);
    }

    &:active {
      color: darken(@primary-color, 20%);
    }
    &.hive-button--disabled {
      color: @disabled-color;
    }
  }
}

.hive-button--block.hive-button {
  display: block;
  width: 100%;
  margin: 0;
}

.hive-button--block+.hive-button--block {
  margin-top: 10px;
}

.hive-button--disabled {
  text-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  cursor: not-allowed;
}

.hive-button-group {
  display: inline-block;
  font-size: 0;

  &+& {
    margin-left: 10px;
  }

  .hive-button {
    position: relative;
    margin: 0;
    min-width: initial;
    border-radius: 0;

    &:hover, &:active, &:focus {
      z-index: 2;
    }

    &:first-child {

      &.hive-button--size-default {
        border-top-left-radius: @button-border-radius-default;
        border-bottom-left-radius: @button-border-radius-default;
      }

      &.hive-button--size-large {
        border-top-left-radius: @button-border-radius-large;
        border-bottom-left-radius: @button-border-radius-large;;
      }

      &.hive-button--size-small {
        border-top-left-radius: @button-border-radius-small;;
        border-bottom-left-radius: @button-border-radius-small;;
      }
      
    }

    &:last-child {
      &.hive-button--size-default {
        border-top-right-radius: @button-border-radius-default;
        border-bottom-right-radius: @button-border-radius-default;
      }

      &.hive-button--size-large {
        border-top-right-radius: @button-border-radius-large;
        border-bottom-right-radius: @button-border-radius-large;;
      }

      &.hive-button--size-small {
        border-top-right-radius: @button-border-radius-small;;
        border-bottom-right-radius: @button-border-radius-small;;
      }
    }
  }

  .hive-button+.hive-button {
    margin-left: -1px;
  }

  .hive-button--block {
    &:first-child {

      &.hive-button--size-default {
        border-radius: @button-border-radius-default @button-border-radius-default 0 0;
      }

      &.hive-button--size-large {
        border-radius: @button-border-radius-large @button-border-radius-large 0 0;
      }

      &.hive-button--size-small {
        border-radius: @button-border-radius-small @button-border-radius-small 0 0;
      }
      
    }

    &:last-child {
      &.hive-button--size-default {
        border-radius: 0 0 @button-border-radius-default @button-border-radius-default;
      }

      &.hive-button--size-large {
        border-radius: 0 0 @button-border-radius-large @button-border-radius-large;
      }

      &.hive-button--size-small {
        border-radius: 0 0 @button-border-radius-small @button-border-radius-small;
      }
    }
  }

  .hive-button--block+.hive-button--block {
    margin-left: 0px;
    margin-top: -1px;
  }
}