@import "../mixins/_color-scheme";
@import "../mixins/_fluid.scss";

.q-button {
  cursor: pointer;
  display: inline-block;
  position: relative;
  user-select: none;
  padding-left: $space-medium;
  padding-right: $space-medium;
  font-weight: $regular;
  font-family: $font-family;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  letter-spacing: normal;
  text-align: center;
  border-radius: $border-radius-button;

  &.q-button-large {
    height: $button-height-large;
    font-size: $button-font-size-large;
  }

  &.q-button-medium {
    height: $button-height-medium;
    font-size: $button-font-size-medium;
  }

  &.q-button-small {
    height: $button-height-small;
    font-size: $button-font-size-small;
  }

  &.q-button-xsmall {
    height: $button-height-xsmall;
    font-size: $button-font-size-small;
  }

  &.q-primary {
    @include primary;
  }

  &.q-secondary {
    @include secondary;
  }

  &.q-gray {
    @include gray;
  }

  &.q-disabled {
    @include disabled;
  }

  &.q-fluid {
    @include fluid;
  }

  &.q-round {
    border-radius: $button-round;
  }

  &.q-circular {
    border-radius: 50%;
    width: $button-circular;
    height: $button-circular;
    padding: 0;
  }

  &:focus {
    outline: none !important;
  }

  &:hover {
    text-decoration: none;
  }

  //Icon
  .q-icon {
    padding-left: 0;
    padding-right: $space-small;
  }

  .q-icon:only-child {
    padding-right: 0;
  }

  //Loader
  &.loading {
    .q-loader {
      background-color: transparent;
      transform: scale(0.4);
    }

    //Hide button contents
    .q-loader + span {
      opacity: 0;
    }
  }
}