/*!
* @license @rakuten-rex/stepper v1.6.0 2020-07-01
* _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-stepper {
  @include rex-core();
  @include rex-stepper-reset();
  @include rex-stepper-content();
}

@mixin rex-stepper-reset() {
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  input[type="number"] {
    -moz-appearance: textfield;
  }
}

@mixin rex-stepper-content {
  display: flex;
  margin-top: var(
    --rex-stepper-theme-margin-top,
    $--rex-stepper-theme-margin-top
  );
  margin-right: var(
    --rex-stepper-theme-margin-right,
    $--rex-stepper-theme-margin-right
  );
  margin-bottom: var(
    --rex-stepper-theme-margin-bottom,
    $--rex-stepper-theme-margin-bottom
  );
  margin-left: var(
    --rex-stepper-theme-margin-left,
    $--rex-stepper-theme-margin-left
  );

  button {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
    text-transform: none;
    box-sizing: border-box;
    padding: 0;

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

  .rex-icon-button {
    outline: none;
    border: none;
    padding: 0;
    width: 2.5rem;
    height: 2rem;
    transition: all 250ms ease;
    background-color: var(
      --rex-stepper-theme-button,
      $--rex-stepper-theme-button
    );

    svg path {
      fill: var(
        --rex-stepper-theme-default-icon,
        $--rex-stepper-theme-default-icon
      );
    }

    &:focus {
      outline: none;
    }

    &:hover,
    &.hover {
      @include rex-hover-state();

      svg path {
        fill: var(
          --rex-stepper-theme-hover-icon,
          $--rex-stepper-theme-hover-icon
        );
      }
    }

    &:active,
    &.active,
    &:focus,
    &.focus {
      @include rex-active-state();

      svg path {
        fill: var(
          --rex-stepper-theme-active-icon,
          $--rex-stepper-theme-active-icon
        );
      }
    }

    &.disabled,
    &:disabled {
      @include rex-disabled-button-state();

      svg path {
        fill: var(
          --rex-stepper-theme-disabled-icon,
          $--rex-stepper-theme-disabled-icon
        );
      }
    }

    svg:hover path {
      fill: var(
        --rex-stepper-theme-hover-icon,
        $--rex-stepper-theme-hover-icon
      );
    }
  }

  .rex-stepper-counter {
    border: none;
    box-sizing: border-box;
    color: var(
      --rex-stepper-theme-number-text,
      $--rex-stepper-theme-number-text
    );
    background: var(
      --rex-stepper-theme-background,
      $--rex-stepper-theme-background
    );
    font-size: 1rem;
    min-width: 3.5rem;
    width: 100%;
    height: 2rem;
    line-height: 2rem;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    outline: none;

    &:focus {
      outline: none;
    }

    &:disabled {
      @include rex-disabled-input-state();
    }
  }

  .minus {
    border-radius: 0.25rem 0 0 0.25rem;
  }

  .plus {
    border-radius: 0 0.25rem 0.25rem 0;
  }
}

@mixin rex-hover-state() {
  &:not([disabled]) {
    background-color: var(
      --rex-stepper-theme-hover-button,
      $--rex-stepper-theme-hover-button
    );
  }
}

@mixin rex-active-state() {
  &:not([disabled]) {
    background-color: var(
      --rex-stepper-theme-active-button,
      $--rex-stepper-theme-active-button
    );
  }
}

@mixin rex-disabled-button-state() {
  &:not(.hover) {
    pointer-events: none;
    background-color: var(
      --rex-stepper-theme-disabled-button,
      $--rex-stepper-theme-disabled-button
    );
  }
}

@mixin rex-disabled-input-state() {
  &:not(.hover) {
    pointer-events: none;
    color: var(
      --rex-stepper-theme-disabled-input-text,
      $--rex-stepper-theme-disabled-input-text
    );
    background-color: var(
      --rex-stepper-theme-disabled-input-background,
      $--rex-stepper-theme-disabled-input-background
    );
    //iOS
    opacity: 1;
    -webkit-text-fill-color: var(
      --rex-stepper-theme-disabled-input-text,
      $--rex-stepper-theme-disabled-input-text
    );
  }
} // ReX Colors
$--rex-gray-300: #d1d1d1;
$--rex-gray-500: #9c9c9c;
$--rex-gray-700: #686868;
$--rex-gray-800: #4d4d4d;
$--rex-gray-900: #333333;
$--rex-white: #ffffff;
$--rex-blue: #1364ff;
$--rex-disabled-text: #898989;

// Theme SASS vars for fallback value in CSS vars
$--rex-stepper-theme-number-text: $--rex-gray-900;
$--rex-stepper-theme-button: $--rex-white;
$--rex-stepper-theme-background: $--rex-white;
$--rex-stepper-theme-default-icon: #606060;
$--rex-stepper-theme-hover-button: $--rex-blue;
$--rex-stepper-theme-hover-icon: $--rex-white;
$--rex-stepper-theme-active-button: $--rex-blue;
$--rex-stepper-theme-active-icon: $--rex-white;
$--rex-stepper-theme-disabled-icon: $--rex-disabled-text;
$--rex-stepper-theme-disabled-button: $--rex-white;
$--rex-stepper-theme-disabled-input-background: $--rex-white;
$--rex-stepper-theme-disabled-input-text: $--rex-disabled-text;
$--rex-stepper-theme-margin-top: 0;
$--rex-stepper-theme-margin-right: 0;
$--rex-stepper-theme-margin-bottom: 0.5rem;
$--rex-stepper-theme-margin-left: 0;
$--rex-stepper-label-theme-text: #606060;
$--rex-stepper-label-theme-hover-text: $--rex-blue;
$--rex-stepper-label-theme-active-text: $--rex-blue;
$--rex-stepper-label-theme-disabled-text: $--rex-disabled-text;