/*!
* @license @rakuten-rex/button v1.5.1 2020-11-16
* _styles.mixin.scss
*
* Copyright (c) 2018-present, Rakuten, Inc.
*
* This source code is licensed under the MIT license found in the LICENSE file in the root directory of this source tree.
*/
@mixin rex-core {
  -webkit-text-size-adjust: 100%;

  // html
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  // body
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1rem;
  line-height: 1.5;
  color: #333333;
  text-align: left;
  background-color: inherit;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  &:before,
  &:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
}

@mixin rex-button-ui {
  @include rex-core();
  @include rex-core-button();
  @include rex-button-theme();
  @include rex-button-base-shape();
  @include rex-button-base-position();
  @include rex-button-base-font-text();
  @include rex-button-base-actions();
  @include hover-focus();
}

@mixin rex-button-theme() {
  // ReX Colors
  --rex-blue-700: #134ff3;
  --rex-blue-600: #3a6dfa;
  --rex-blue-800: #053ace;
  --rex-white: #fff;
  --rex-gray-200: #ebebeb;
  // Theme
  --rex-button-theme-background: var(--rex-blue-700);
  --rex-button-theme-text: var(--rex-white);
  --rex-button-theme-border: var(--rex-blue-700);

  --rex-button-theme-hover-background: var(--rex-blue-600);
  --rex-button-theme-hover-text: var(--rex-white);
  --rex-button-theme-hover-border: var(--rex-blue-600);

  --rex-button-theme-active-background: var(--rex-blue-800);
  --rex-button-theme-active-text: var(--rex-white);
  --rex-button-theme-active-border: var(--rex-blue-800);

  --rex-button-theme-focus-background: var(--rex-blue-600);
  --rex-button-theme-focus-text: var(--rex-white);
  --rex-button-theme-focus-border: var(--rex-blue-600);
  // Props
  --rex-button-border-radius: 0.25rem;
  --rex-button-padding-top-bottom: 0.5rem;
  --rex-button-padding-left-right: 1rem;
  --rex-button-min-width: auto;
}

@mixin rex-core-button {
  margin: 0;
  font-weight: inherit;
  overflow: visible;
  text-transform: none;
  -webkit-appearance: button;
  width: auto;
  min-width: var(--rex-button-min-width);

  &::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  &:-moz-focusring {
    outline: 1px dotted;
  }

  &[role="button"] {
    cursor: pointer;
  }
}

@mixin rex-button-base-shape {
  display: inline-block;
  border: 1px solid var(--rex-button-theme-border);
  border-radius: var(--rex-button-border-radius);
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: var(--rex-button-theme-background);
}

@mixin rex-button-base-position {
  margin-bottom: 0;
  padding: var(--rex-button-padding-top-bottom)
    var(--rex-button-padding-left-right) var(--rex-button-padding-top-bottom)
    var(--rex-button-padding-left-right);
}

@mixin rex-button-base-font-text {
  color: var(--rex-button-theme-text);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
}

@mixin rex-button-base-actions {
  cursor: pointer;
  touch-action: manipulation;
  -ms-touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  &:focus {
    outline: none;
  }
}

@mixin hover-focus() {
  &:hover,
  &.hover {
    color: var(--rex-button-theme-hover-text);
    background-color: var(--rex-button-theme-hover-background);
    border-color: var(--rex-button-theme-hover-border);
  }

  &:active,
  &.active {
    color: var(--rex-button-theme-active-text);
    background-color: var(--rex-button-theme-active-background);
    border-color: var(--rex-button-theme-active-border);
  }

  &:focus,
  &.focus {
    color: var(--rex-button-theme-focus-text);
    background-color: var(--rex-button-theme-focus-background);
    border-color: var(--rex-button-theme-focus-border);
  }
}