@use '../settings/variables' as v;
@use '../settings/mixins' as m;

/* stylelint-disable selector-max-specificity */

// Default / Primary Button
.qpp-c-button,
.qpp-c-button:visited,
.qppds .qpp-c-button,
.qppds .qpp-c-button:visited {
  background-color: v.$blue-60;
  border: 1px solid v.$blue-60;
  border-radius: 3px;
  box-sizing: border-box;
  color: v.$white;
  cursor: pointer;
  display: inline-block;
  font-family: v.$font-rubik;
  font-size: v.$font-size-14;
  font-weight: v.$font-medium;
  letter-spacing: v.$letter-spacing-sm;
  line-height: v.$line-height-xs;
  padding: v.$spacing-12 v.$spacing-16;
  text-align: center;
  text-decoration: none;

  &:hover,
  &.qpp-c-button--hover {
    background-color: v.$blue-70;
    border: 1px solid v.$blue-70;
    color: v.$white;
  }

  &:focus,
  &.qpp-c-button--focus {
    border: 1px solid v.$blue-70;
    border-radius: 3px;
    box-shadow: 0 0 0 4px v.$blue-10;
    outline: none;
    text-decoration: none;
    color: v.$white;
    padding: v.$spacing-12 v.$spacing-16;
    margin-left: 0;
    margin-right: 0;
  }

  &:active,
  &.qpp-c-button--active {
    background-color: darken(v.$blue-70, 3%);
    border: 1px solid darken(v.$blue-70, 3%);
    color: v.$white;
  }

  &:disabled,
  &.qpp-c-button--disabled {
    background-color: #d9d9d9;
    border: 1px solid #d9d9d9;
    color: #404040;
    pointer-events: none;
  }

  &.qpp-c-button--big {
    padding: v.$spacing-16 v.$spacing-24;
  }

  &.qpp-c-button--text {
    background-color: transparent;
    border: 1px solid transparent;
    padding: 1px;
  }

  // Secondary Button
  &.qpp-c-button--secondary {
    background-color: v.$white;
    border: 1px solid v.$gray-10;
    color: v.$gray-80;
    font-size: v.$font-size-14;

    &:hover,
    &.qpp-c-button--hover {
      background-color: v.$gray-04;
      color: v.$gray-80;
    }

    &:active,
    &.qpp-c-button--active {
      background-color: darken(v.$gray-04, 3%);
      color: v.$gray-80;
    }

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: v.$gray-10;
      color: v.$gray-60;
    }

    &:focus,
    &.qpp-c-button--focus {
      border: 1px solid v.$blue-60;
    }
  }

  // White Button
  &.qpp-c-button--white {
    background-color: v.$white;
    border: 1px solid v.$white;
    color: v.$gray-80;
    font-size: v.$font-size-14;

    &:hover,
    &.qpp-c-button--hover {
      border: 1px solid v.$gray-10;
      background-color: v.$gray-10;
      color: v.$gray-80;
    }

    &:active,
    &.qpp-c-button--active {
      background-color: darken(v.$gray-10, 3%);
      color: v.$gray-80;
    }

    &:focus,
    &.qpp-c-button--focus {
      border: 1px solid v.$blue-60;
      box-shadow: 0 0 0 4px v.$blue-10;
    }

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: v.$gray-10;
      color: v.$gray-60;
      border-color: v.$gray-10;
    }

    &.qpp-c-button--text {
      background-color: transparent;
      border: 1px solid transparent;
      padding: 1px;
    }
  }

  // Outline Button
  &.qpp-c-button--outline {
    background-color: transparent;
    border: 1px solid v.$white;
    color: v.$white;
    font-size: v.$font-size-14;

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: v.$gray-10;
      color: v.$gray-60;
      border-color: v.$gray-10;
    }

    &:hover,
    &.qpp-c-button--hover {
      background-color: fade-out(v.$black, 0.8);
    }

    &:active,
    &.qpp-c-button--active {
      background-color: fade-out(v.$black, 0.7);
    }

    &:focus,
    &.qpp-c-button--focus {
      border: 1px solid v.$blue-60;
      box-shadow: 0 0 0 4px v.$blue-10;
    }
  }

  // Danger / Destructive Button
  &.qpp-c-button--danger {
    background-color: transparent;
    border: 1px solid v.$red-50;
    color: v.$red-50;
    font-size: v.$font-size-14;

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: v.$gray-10;
      border: 1px solid v.$gray-10;
      color: v.$gray-60;
    }

    &:hover,
    &.qpp-c-button--hover {
      background-color: fade-out(v.$red-50, 0.9);
      color: v.$red-60;
    }

    &:active,
    &.qpp-c-button--active {
      background-color: fade-out(v.$red-50, 0.85);
    }

    &:focus,
    &.qpp-c-button--focus {
      border: 1px solid v.$red-50;
      box-shadow: 0 0 0 4px v.$red-10;
      outline: none;
      text-decoration: none;
    }

    &.qpp-c-button--text {
      background-color: transparent;
      border: 1px solid transparent;
      padding: 1px;
    }
  }
}

.qpp-c-button.qpp-c-button--text,
.qppds .qpp-c-button.qpp-c-button--text {
  color: v.$blue-60;

  &:disabled,
  &.qpp-c-button--disabled {
    color: v.$gray-60;
  }

  &:focus,
  &.qpp-c-button--focus {
    border: 1px solid v.$blue-60;
    color: v.$blue-60;
  }

  &:hover,
  &.qpp-c-button--hover {
    color: v.$blue-70;
  }

  &.qpp-c-button--danger {
    color: v.$red-50;

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: transparent;
      color: v.$gray-60;
    }

    &:hover,
    &.qpp-c-button--hover {
      color: v.$red-60;
    }

    &:focus,
    &.qpp-c-button--focus {
      background-color: transparent;
      border: 1px solid v.$red-50;
    }
  }

  &.qpp-c-button--white {
    color: v.$white;

    &:disabled,
    &.qpp-c-button--disabled {
      background-color: transparent;
      color: v.$gray-10;
    }

    &:hover,
    &.qpp-c-button--hover {
      color: v.$gray-10;
    }

    &:focus,
    &.qpp-c-button--focus {
      background-color: transparent;
      border: 1px solid v.$blue-60;
    }
  }
}

// TODO: Text buttons (https://zeroheight.com/079543162/p/56ad70-button/t/17855d)
/* stylelint-disable selector-no-qualifying-type */
.qpp-c-button > svg {
  @include m.inline-icon-md;
  font-size: inherit;

  &.qpp-icon-mat {
    @include m.mat-icon-medium;
  }
}

.qpp-c-button > svg.qpp-icon-inline {
  @include m.inline-icon;
}

.qpp-c-button > svg.qpp-icon-inline--lg {
  @include m.inline-icon-lg;
}
/* stylelint-enable selector-no-qualifying-type */

.qpp-c-button--icon-before > svg {
  margin-right: v.$spacing-8;
}

.qpp-c-button--icon-after > svg {
  margin-left: v.$spacing-8;
}

/* stylelint-enable selector-max-specificity */