@import "../../../themes/core/variables";
@import "../../../themes/core/colors";
@import "../../../themes/core/typography";

$margin: 0 !default;
$border-radius: 4px !default;
$font-size: 14px;
$line-height: 34px !default;
$padding: 0px 10px !default;
$line-height-large: 38px !default;
$padding-large: 4px 14px !default;
$padding-ext: 0 16px;
$line-height-ext: 54px !default;
$border-radius-ext: 30px;

// Stroked button padding is 1px less horizontally than default/flat/raised
// button's padding.
$stroked-button-border-width: 1px;

// Icon Button standards
$button-size: 40px !default;
$button-border-radius: 50% !default;
$button-line-height: 24px !default;

// Fab standards
$fab-border-radius: 50% !default;
$fab-size: 56px !default;
$fab-padding: 16px !default;

$mini-fab-size: 40px !default;
$mini-fab-padding: 8px !default;

// Applies base styles to all button types.
@mixin base {
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: pointer;
  outline: none;
  border: none;
  -webkit-tap-highlight-color: transparent;
  &::-moz-focus-inner {
    border: 0;
  }
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  vertical-align: baseline;
  text-align: center;
  font-size: $font-size;
  margin: $margin;

  &.qms-btn-disabled {
    cursor: default;
    background: $disabled;
    color: black(0.38);
  }

  .mat-icon {
    font-size: 24px !important;
    padding-bottom: 1px;
  }

  &::-moz-focus-inner {
    border: 0;
  }
}

@mixin fab($size, $padding) {
  min-width: 0;
  width: $size;
  height: $size;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
    0px 5px 5px black(0.2);

  .qms-btn-wrapper {
    padding: $padding 0;
    display: inline-block;
    line-height: $button-line-height;
  }
}

@mixin fab-ext {
  box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
    0px 5px 5px black(0.2);
  padding: $padding-ext;
  border-radius: $border-radius-ext;
  line-height: $line-height-ext;
  height: $fab-size;
}

@mixin size-default {
  height: 36px;
  line-height: $line-height;
  padding: $padding;
}

@mixin size-large {
  height: 48px;
  line-height: $line-height-large;
  padding: $padding-large;
}

@mixin typo {
  font-family: Open Sans;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 1px;
  font-style: normal;
}

@mixin qms-btn($color) {
  @if $color == primary {
    background-color: $primary;
    color: white;

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: $primary;
      box-shadow: 0 0 0 2px #8caad4;
    }

    &:not([disabled]):hover {
      background-color: $primary-light;
      color: white;
    }
  } @else if $color == secondary {
    background-color: $secondary;
    color: white;

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: $secondary;
      box-shadow: 0 0 0 2px #cf9b87;
    }

    &:not([disabled]):hover {
      background-color: $secondary-light;
      color: white;
    }
  }
}

@mixin qms-btn-outlined($color) {
  @if $color == primary {
    background-color: white;
    color: $primary;
    border: 1px solid black(0.12);

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: white;
      color: $primary;
      box-shadow: 0 0 0 2px $primary;
    }

    &:not([disabled]):hover {
      background-color: $primary-light-6-opacity;
      color: $primary;
    }
  } @else if $color == secondary {
    background-color: white;
    color: $secondary;
    border: 1px solid $secondary;

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: white;
      color: $secondary-light;
      box-shadow: 0 0 0 2px $secondary-dark;
    }

    &:not([disabled]):hover {
      background-color: $secondary-light-6-opacity;
      color: $secondary-light;
      border: 1px solid $secondary-light;
    }
  }
}

@mixin qms-btn-text($color) {
  @if $color == primary {
    background-color: transparent;
    color: $primary;

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: transparent;
      color: $primary;
      box-shadow: 0 0 0 2px $primary;
    }

    &:not([disabled]):hover {
      background-color: $primary-light-6-opacity;
      color: $primary;
    }
  } @else if $color == secondary {
    background-color: transparent;
    color: $secondary;

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: none;
      }
    }

    &:not([disabled]):focus {
      background-color: transparent;
      color: $secondary-light;
      box-shadow: 0 0 0 2px $secondary-dark;
    }

    &:not([disabled]):hover {
      background-color: $secondary-light-6-opacity;
      color: $secondary-light;
    }
  }
}

@mixin qms-btn-fab-outlined($color) {
  @if $color == primary {
    background-color: white;
    color: $primary;
    border: 1px solid black(0.12);

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }

    &:not([disabled]):focus {
      background-color: white;
      color: $primary;
      box-shadow: 0 0 0 2px $primary,
        0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }

    &:not([disabled]):hover {
      background-color: $primary-light-6-opacity;
      color: $primary;
    }
  } @else if $color == secondary {
    background-color: white;
    color: $secondary;
    border: 1px solid black(0.12);

    &:not([disabled]):focus {
      &:not(:focus-visible) {
        box-shadow: 0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
      }
    }

    &:not([disabled]):focus {
      background-color: white;
      color: $secondary-light;
      box-shadow: 0 0 0 2px $secondary-dark,
        0px 8px 10px black(0.14), 0px 3px 14px black(0.12),
          0px 5px 5px black(0.2);
    }

    &:not([disabled]):hover {
      background-color: $secondary-light-6-opacity;
      color: $secondary-light;
    }
  }
}
