@import "../customVars";

.v-btn-wrapper {
  display: inline-block;

  &.spinning {
    .v-icon {
      visibility: hidden;
    }

    button > span {
      visibility: hidden;
    }

    .v-spin {
      position: absolute;
      right: 0;
      left: 0;
      margin: auto;
    }
  }

  .ant-btn {
    font-weight: 400;
    padding: 0 18px;
    box-shadow: @common-shadow;
    color: @black;

    &.ant.btn-clicked {
      transition: none;
    }

    &.v-btn-mini {
      width: 32px;
      height: 32px;
      padding: 0;
      color: @gray;
      box-shadow: none;

      &:focus:active, &:active, &.ant-popover-open {
        // fix safari behavior
        color: @black !important;
        background-color: @white;
        border-color: @white;
      }

      &:focus, &:hover {
        background-color: @white;
        border-color: @white;
        color: @gray;
      }
    }

    .v-icon {
      &+ span {
        margin-left: 9px;
      }
    }

    &:not(.ant-btn-circle) {
      &:not(.ant-btn-circle-outline){
        &.ant-btn-icon-only {
          padding: 0 16px;
        }
      }
    }

    &:disabled {
      font-weight: 500;
      background-color: rgba(141, 141, 141, .4) !important;
      border-color: transparent !important;
      color: rgba(10, 6, 6, .4) !important;
    }


    &:focus, &:hover {
      background-color: @white;
      border-color: @white;
      color: @black;
      box-shadow: @common-shadow;
    }

    &:focus:active, &:active, &.ant-popover-open {
      background-color: @black;
      border-color: @black;
      color: @white;
    }

    &.ant-btn-primary {
      color: @white;
      border-width: 1px;
      transition: border 120ms linear;

      &:focus, &:hover {
        background-color: @we-green;
        border-color: @we-green;
      }

      &:hover {
        border-color: @black;
      }

      &:focus:active, &:active , &.ant-popover-open {
        background-color: @black;
        border-color: @black;
        color: @white;
      }
    }
  }
  // remove ant design animation
  .ant-btn-clicked {
    &:after {
      animation: none;
    }
  }
}
