/*!
* @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-stepper-label {
  @include rex-stepper-label-state();
  @include rex-stepper-label-margin();

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

@mixin rex-stepper-label-margin {
  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
  );
  .rex-stepper {
    margin: initial;
  }
}

@mixin rex-stepper-label-state {
  label {
    margin-bottom: 0.25rem;
    padding-left: 0.75rem;
  }
}

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