/*!
* @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-label-ui {
  @include rex-core();
  @include rex-stepper-label-ui-content();
}

@mixin rex-stepper-label-ui-content {
  font-size: 0.75rem;
  display: block;
  color: var(--rex-stepper-label-theme-text, $--rex-stepper-label-theme-text);
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
  &.hover {
    @include rex-stepper-label-ui-hover-state();
  }
  &[disabled],
  &.disabled {
    @include rex-stepper-label-ui-disabled-state();
    &:active,
    &.active,
    &:focus,
    &.focus {
      color: var(
        --rex-stepper-label-theme-disabled-text,
        $--rex-stepper-label-theme-disabled-text
      );
    }
  }
  &:active,
  &.active,
  &:focus,
  &.focus {
    @include rex-stepper-label-ui-active-state();
  }
}

@mixin rex-stepper-label-ui-hover-state {
  color: var(
    --rex-stepper-label-theme-hover-text,
    $--rex-stepper-label-theme-hover-text
  );
}

@mixin rex-stepper-label-ui-disabled-state {
  color: var(
    --rex-stepper-label-theme-disabled-text,
    $--rex-stepper-label-theme-disabled-text
  );
}

@mixin rex-stepper-label-ui-active-state {
  outline: none;
  &:not([disabled]) {
    color: var(
      --rex-stepper-label-theme-active-text,
      $--rex-stepper-label-theme-active-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;