// utils
/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: 100%;
  font-weight: normal;
}

ul {
  list-style: none;
}

button,
input,
select,
textarea {
  margin: 0;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

img,
video {
  height: auto;
  max-width: 100%;
}

iframe {
  border: 0;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

input,
input:focus {
  outline: none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

input[type='text'],
input[type='password'],
textarea,
select {
  outline: none;
}

div {
  &:focus {
    outline: none;
    -webkit-appearance: none;
  }
}
 // reset css
[class^='rol-'],
[class*=' rol-'] {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // 为什么这样写 font-family
  // 答案见 https://github.com/zenozeng/fonts.css/
  font-family: -apple-system, 'Noto Sans', 'Helvetica Neue', Helvetica,
    'Nimbus Sans L', Arial, 'Liberation Sans', 'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans CJK SC', 'Source Han Sans SC', 'Source Han Sans CN',
    'Microsoft YaHei', 'Wenquanyi Micro Hei', 'WenQuanYi Zen Hei', 'ST Heiti',
    SimHei, 'WenQuanYi Zen Hei Sharp', sans-serif;
}

$namespace: 'rol';
$element-separator: '__';
$modifier-separator: '--';
$state-prefix: 'is-'; // 通用设置
// Colors
$black: hsl(0, 0%, 4%) !default;
$black-bis: hsl(0, 0%, 7%) !default;
$black-ter: hsl(0, 0%, 14%) !default;

$grey-darker: hsl(0, 0%, 21%) !default;
$grey-dark: hsl(0, 0%, 29%) !default;
$grey: hsl(0, 0%, 48%) !default;
$grey-light: hsl(0, 0%, 71%) !default;
$grey-lighter: hsl(0, 0%, 86%) !default;
$grey-lightest: hsl(0, 0%, 93%) !default;

$white-ter: hsl(0, 0%, 96%) !default;
$white-bis: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;

$orange: hsl(14, 100%, 53%) !default;
$yellow: hsl(48, 100%, 67%) !default;
$green: hsl(141, 53%, 53%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$cyan: hsl(204, 71%, 53%) !default;
$blue: hsl(217, 71%, 53%) !default;
$purple: hsl(271, 100%, 71%) !default;
$red: hsl(348, 86%, 61%) !default;

// Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
  'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
$family-monospace: monospace !default;
$render-mode: optimizeLegibility !default;

$size-1: 2.5rem !default;
$size-2: 2rem !default;
$size-3: 1.75rem !default;
$size-4: 1.25rem !default;
$size-5: 1.05rem !default;
$size-6: 0.9rem !default;
$size-7: 0.75rem !default;
$size-8: 0.5rem !default;

$font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$font-size-extra-small: 12px !default;

$weight-light: 300 !default;
$weight-normal: 400 !default;
$weight-medium: 500 !default;
$weight-semibold: 600 !default;
$weight-bold: 700 !default;

// Spacing
$block-spacing: 1.5rem !default;

// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px !default;
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default;
// 960px container + 4rem
$desktop: 960px + (2 * $gap) !default;
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default;
$widescreen-enabled: true !default;
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default;
$fullhd-enabled: true !default;

// Miscellaneous
$easing: ease-out !default;
$radius-small: 2px !default;
$radius: 4px !default;
$radius-large: 6px !default;
$radius-rounded: 290486px !default;
$speed: 86ms !default;

$index-normal: 1 !default;
$index-top: 1000 !default;
$index-popper: 2000 !default;
$index-top: 9999 !default;
// Flags
$variable-columns: true !default;
$rtl: false !default;

//desktop-size
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
  'xs': (
    max-width: $sm - 1,
  ),
  'sm': (
    min-width: $sm,
  ),
  'md': (
    min-width: $md,
  ),
  'lg': (
    min-width: $lg,
  ),
  'xl': (
    min-width: $xl,
  ),
);
 // 基础变量
@function mergeColorMaps($rol-colors, $custom-colors) {
  $merged-colors: $rol-colors;

  @if (type-of($custom-colors) == 'map') {
    @each $name, $components in $custom-colors {
      @if (
        type-of($name) ==
          'string' and
          (
            type-of($components) == 'list' or type-of($components) == 'color'
          ) and
          length($components) >=
          1
      ) {
        $color-base: null;
        $color-invert: null;
        $color-light: null;
        $color-dark: null;
        $value: null;

        @if type-of($components) == 'color' {
          $color-base: $components;
          $color-invert: findColorInvert($color-base);
          $color-light: findLightColor($color-base);
          $color-dark: findDarkColor($color-base);
        } @else if type-of($components) == 'list' {
          $color-base: nth($components, 1);

          @if length($components) > 3 {
            $color-invert: nth($components, 2);
            $color-light: nth($components, 3);
            $color-dark: nth($components, 4);
          } @else if length($components) > 2 {
            $color-invert: nth($components, 2);
            $color-light: nth($components, 3);
            $color-dark: findDarkColor($color-base);
          } @else {
            $color-invert: nth($components, 2);
            $color-light: findLightColor($color-base);
            $color-dark: findDarkColor($color-base);
          }
        }

        $value: ($color-base, $color-invert, $color-light, $color-dark);

        @if type-of($color-base) == 'color' {
          $merged-colors: map_merge(
            $merged-colors,
            (
              $name: $value,
            )
          );
        }
      }
    }
  }

  @return $merged-colors;
}

@function powerNumber($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function colorLuminance($color) {
  @if type-of($color) != 'color' {
    @return 0.55;
  }
  $color-rgb: (
    'red': red($color),
    'green': green($color),
    'blue': blue($color),
  );
  @each $name, $value in $color-rgb {
    $adjusted: 0;
    $value: $value / 255;
    @if $value < 0.03928 {
      $value: $value / 12.92;
    } @else {
      $value: ($value + 0.055) / 1.055;
      $value: powerNumber($value, 2);
    }
    $color-rgb: map-merge(
      $color-rgb,
      (
        $name: $value,
      )
    );
  }

  @return (map-get($color-rgb, 'red') * 0.2126) +
    (map-get($color-rgb, 'green') * 0.7152) +
    (map-get($color-rgb, 'blue') * 0.0722);
}

@function findColorInvert($color) {
  @if (colorLuminance($color) > 0.55) {
    @return rgba(#000, 0.7);
  } @else {
    @return #fff;
  }
}

@function Rgba($color, $alpha) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return rgba($color, $alpha);
}

@function findLightColor($color) {
  @if type-of($color) == 'color' {
    $l: 96%;
    @if lightness($color) > 96% {
      $l: lightness($color);
    }
    @return change-color($color, $lightness: $l);
  }
  @return $background;
}

@function findDarkColor($color) {
  @if type-of($color) == 'color' {
    $base-l: 29%;
    $luminance: colorLuminance($color);
    $luminance-delta: (0.53 - $luminance);
    $target-l: round($base-l + ($luminance-delta * 53));
    @return change-color($color, $lightness: max($base-l, $target-l));
  }
  @return $text-strong;
}

@function Darken($color, $amount) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return darken($color, $amount);
}

@function Lighten($color, $amount) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return lighten($color, $amount);
}


$primary: $turquoise !default;
$info: $cyan !default;
$success: $green !default;
$warning: $yellow !default;
$danger: $red !default;

$light: $white-ter !default;
$dark: $grey-darker !default;

// Invert colors
$orange-invert: findColorInvert($orange) !default;
$yellow-invert: findColorInvert($yellow) !default;
$green-invert: findColorInvert($green) !default;
$turquoise-invert: findColorInvert($turquoise) !default;
$cyan-invert: findColorInvert($cyan) !default;
$blue-invert: findColorInvert($blue) !default;
$purple-invert: findColorInvert($purple) !default;
$red-invert: findColorInvert($red) !default;

// Invert and light derived color
$primary-invert: findColorInvert($primary) !default;
$primary-light: findLightColor($primary) !default;
$primary-dark: findDarkColor($primary) !default;
$info-invert: findColorInvert($info) !default;
$info-light: findLightColor($info) !default;
$info-dark: findDarkColor($info) !default;
$success-invert: findColorInvert($success) !default;
$success-light: findLightColor($success) !default;
$success-dark: findDarkColor($success) !default;
$warning-invert: findColorInvert($warning) !default;
$warning-light: findLightColor($warning) !default;
$warning-dark: findDarkColor($warning) !default;
$danger-invert: findColorInvert($danger) !default;
$danger-light: findLightColor($danger) !default;
$danger-dark: findDarkColor($danger) !default;
$light-invert: findColorInvert($light) !default;
$dark-invert: findColorInvert($dark) !default;

// General colors
$scheme-main: $white !default;
$scheme-main-bis: $white-bis !default;
$scheme-main-ter: $white-ter !default;
$scheme-invert: $black !default;
$scheme-invert-bis: $black-bis !default;
$scheme-invert-ter: $black-ter !default;

$background: $white-ter !default;

$border: $grey-lighter !default;
$border-hover: $grey-light !default;
$border-light: $grey-lightest !default;
$border-light-hover: $grey-light !default;

// Text colors
$text: $grey-dark !default;
$text-invert: findColorInvert($text) !default;
$text-light: $grey !default;
$text-lighter: $grey-light !default;
$text-strong: $grey-darker !default;

// Code colors
$code: darken($red, 15%) !default;
$code-background: $background !default;

$pre: $text !default;
$pre-background: $background !default;

// Link colors
$link: $blue !default;
$link-invert: findColorInvert($link) !default;
$link-light: findLightColor($link) !default;
$link-dark: findDarkColor($link) !default;
$link-visited: $purple !default;

$link-hover: $grey-darker !default;
$link-hover-border: $grey-light !default;

$link-focus: $grey-darker !default;
$link-focus-border: $blue !default;

$link-active: $grey-darker !default;
$link-active-border: $grey-dark !default;

// Typography
$family-primary: $family-sans-serif !default;
$family-secondary: $family-sans-serif !default;
$family-code: $family-monospace !default;

$size-mini: $size-8 !default;
$size-small: $size-7 !default;
$size-normal: $size-6 !default;
$size-medium: $size-5 !default;
$size-large: $size-4 !default;

// Lists and maps
$custom-colors: null !default;
$custom-shades: null !default;

$box-shadow-base: 0 2px 4px Rgba($black-bis, 0.12), 0 0 6px Rgba($black-bis, 0.04) !default;
// boxShadow|1|Shadow|1
$box-shadow-dark: 0 2px 4px Rgba($black-bis, 0.12), 0 0 6px Rgba($black-bis, 0.12) !default;
/// boxShadow|1|Shadow|1
$box-shadow-light: 0 2px 12px 0 Rgba($black-bis, 0.1) !default;

$colors: mergeColorMaps(
  (
    'white': (
      $white,
      $black,
    ),
    'black': (
      $black,
      $white,
    ),
    'light': (
      $light,
      $light-invert,
    ),
    'dark': (
      $dark,
      $dark-invert,
    ),
    'primary': (
      $primary,
      $primary-invert,
      $primary-light,
      $primary-dark,
    ),
    'link': (
      $link,
      $link-invert,
      $link-light,
      $link-dark,
    ),
    'info': (
      $info,
      $info-invert,
      $info-light,
      $info-dark,
    ),
    'success': (
      $success,
      $success-invert,
      $success-light,
      $success-dark,
    ),
    'warning': (
      $warning,
      $warning-invert,
      $warning-light,
      $warning-dark,
    ),
    'danger': (
      $danger,
      $danger-invert,
      $danger-light,
      $danger-dark,
    ),
  ),
  $custom-colors
) !default;

// $shades: mergeColorMaps(
//   (
//     'black-bis': $black-bis,
//     'black-ter': $black-ter,
//     'grey-darker': $border-light,
//     'grey-dark': $grey-dark,
//     'grey': $grey,
//     'grey-light': $grey-light,
//     'grey-lighter': $grey-lighter,
//     'white-ter': $white-ter,
//     'white-bis': $white-bis,
//   ),
//   $custom-shades
// ) !default;

// $sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default;
 // 衍生变量
// Colors
$black: hsl(0, 0%, 4%) !default;
$black-bis: hsl(0, 0%, 7%) !default;
$black-ter: hsl(0, 0%, 14%) !default;

$grey-darker: hsl(0, 0%, 21%) !default;
$grey-dark: hsl(0, 0%, 29%) !default;
$grey: hsl(0, 0%, 48%) !default;
$grey-light: hsl(0, 0%, 71%) !default;
$grey-lighter: hsl(0, 0%, 86%) !default;
$grey-lightest: hsl(0, 0%, 93%) !default;

$white-ter: hsl(0, 0%, 96%) !default;
$white-bis: hsl(0, 0%, 98%) !default;
$white: hsl(0, 0%, 100%) !default;

$orange: hsl(14, 100%, 53%) !default;
$yellow: hsl(48, 100%, 67%) !default;
$green: hsl(141, 53%, 53%) !default;
$turquoise: hsl(171, 100%, 41%) !default;
$cyan: hsl(204, 71%, 53%) !default;
$blue: hsl(217, 71%, 53%) !default;
$purple: hsl(271, 100%, 71%) !default;
$red: hsl(348, 86%, 61%) !default;

// Typography
$family-sans-serif: BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
  'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
$family-monospace: monospace !default;
$render-mode: optimizeLegibility !default;

$size-1: 2.5rem !default;
$size-2: 2rem !default;
$size-3: 1.75rem !default;
$size-4: 1.25rem !default;
$size-5: 1.05rem !default;
$size-6: 0.9rem !default;
$size-7: 0.75rem !default;
$size-8: 0.5rem !default;

$font-size-extra-large: 20px !default;
/// fontSize|1|Font Size|0
$font-size-large: 18px !default;
/// fontSize|1|Font Size|0
$font-size-medium: 16px !default;
/// fontSize|1|Font Size|0
$font-size-base: 14px !default;
/// fontSize|1|Font Size|0
$font-size-small: 13px !default;
/// fontSize|1|Font Size|0
$font-size-extra-small: 12px !default;

$weight-light: 300 !default;
$weight-normal: 400 !default;
$weight-medium: 500 !default;
$weight-semibold: 600 !default;
$weight-bold: 700 !default;

// Spacing
$block-spacing: 1.5rem !default;

// Responsiveness
// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px !default;
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default;
// 960px container + 4rem
$desktop: 960px + (2 * $gap) !default;
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default;
$widescreen-enabled: true !default;
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default;
$fullhd-enabled: true !default;

// Miscellaneous
$easing: ease-out !default;
$radius-small: 2px !default;
$radius: 4px !default;
$radius-large: 6px !default;
$radius-rounded: 290486px !default;
$speed: 86ms !default;

$index-normal: 1 !default;
$index-top: 1000 !default;
$index-popper: 2000 !default;
$index-top: 9999 !default;
// Flags
$variable-columns: true !default;
$rtl: false !default;

//desktop-size
$sm: 768px !default;
$md: 992px !default;
$lg: 1200px !default;
$xl: 1920px !default;

$breakpoints: (
  'xs': (
    max-width: $sm - 1,
  ),
  'sm': (
    min-width: $sm,
  ),
  'md': (
    min-width: $md,
  ),
  'lg': (
    min-width: $lg,
  ),
  'xl': (
    min-width: $xl,
  ),
);


$B: null;

@mixin clearfix {
  &::after {
    clear: both;
    content: ' ';
    display: table;
  }
}

@mixin vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
  }
}

@mixin center($width, $height: 0) {
  position: absolute;

  @if $height != 0 {
    left: calc(50% - (#{$width} / 2));
    top: calc(50% - (#{$height} / 2));
  } @else {
    left: calc(50% - (#{$width} / 2));
    top: calc(50% - (#{$width} / 2));
  }
}

@mixin fa($size, $dimensions) {
  display: inline-block;
  height: $dimensions;
  width: $dimensions;
  line-height: $dimensions;
  font-size: $size;
  text-align: center;
  vertical-align: top;
}

@mixin hamburger($dimensions) {
  cursor: pointer;
  display: block;
  height: $dimensions;
  position: relative;
  width: $dimensions;

  span {
    background-color: currentColor;
  }
}

@mixin unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

%unselectable {
  @include unselectable;
}

@keyframes spinAround {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

@mixin loader {
  animation: spinAround 500ms infinite linear;
  border: 2px solid $grey-lighter;
  border-radius: $radius-rounded;
  border-right-color: transparent;
  border-top-color: transparent;
  content: '';
  display: block;
  height: 1em;
  position: relative;
  width: 1em;
}

%loader {
  @include loader;
}

@mixin overlay($offset: 0) {
  bottom: $offset;
  left: $offset;
  position: absolute;
  right: $offset;
  top: $offset;
}

%overlay {
  @include overlay;
}

@mixin ltr {
  @if not $rtl {
    @content;
  }
}

@mixin rtl {
  @if $rtl {
    @content;
  }
}

@mixin ltr-property($property, $spacing, $right: true) {
  $normal: if($right, 'right', 'left');
  $opposite: if($right, 'left', 'right');
  @if $rtl {
    #{$property}-#{$opposite}: $spacing;
  } @else {
    #{$property}-#{$normal}: $spacing;
  }
}

@mixin res($key, $map: $breakpoints) {
  @if map-has-key($map, $key) {
    @media only screen and #{inspect(map-get($map, $key))} {
      @content;
    }
  } @else {
    @warn "Undefeined points: `#{$map}`";
  }
}

@mixin from($device) {
  @media screen and (min-width: $device) {
    @content;
  }
}

// BEM
@mixin bem($block) {
  $B: $namespace + '-' + $block !global;

  .#{$B} {
    @content;
  }
}

@mixin e($element) {
  //$E: $element !global;
  $selector: &;
  $currentSelector: '';
  @each $unit in $element {
    $currentSelector: #{$currentSelector + '.' + $B + $element-separator + $unit + ','};
  }

  @if hitAllSpecialNestRule($selector) {
    @at-root {
      #{$selector} {
        #{$currentSelector} {
          @content;
        }
      }
    }
  } @else {
    @at-root {
      #{$currentSelector} {
        @content;
      }
    }
  }
}

@mixin modify($modifier) {
  $currentSelector: '';
  @each $unit in $modifier {
    $currentSelector: #{$currentSelector + & + $modifier-separator + $unit + ','};
  }

  @at-root {
    #{$currentSelector} {
      @content;
    }
  }
}

@mixin when($state) {
  @at-root {
    &.#{$state-prefix + $state} {
      @content;
    }
  }
}

@mixin delete {
  @extend %unselectable;
  -moz-appearance: none;
  -webkit-appearance: none;
  background-color: Rgba($scheme-invert, 0.2);
  border: none;
  border-radius: $radius-rounded;
  cursor: pointer;
  pointer-events: auto;
  display: inline-block;
  flex-grow: 0;
  flex-shrink: 0;
  font-size: 0;
  height: 20px;
  max-height: 20px;
  max-width: 20px;
  min-height: 20px;
  min-width: 20px;
  outline: none;
  position: relative;
  vertical-align: top;
  width: 20px;
  &::before,
  &::after {
    background-color: $scheme-main;
    content: '';
    display: block;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) rotate(45deg);
    transform-origin: center center;
  }

  &::before {
    height: 2px;
    width: 50%;
  }
  &::after {
    height: 50%;
    width: 2px;
  }
  &:hover,
  &:focus {
    background-color: Rgba($scheme-invert, 0.3);
  }
  &:active {
    background-color: Rgba($scheme-invert, 0.4);
  }
  // Sizes
  &.is-mini {
    height: 12px;
    max-height: 12px;
    max-width: 12px;
    min-height: 12px;
    min-width: 12px;
    width: 12px;
    transform: scale(0.75);
  }
  &.is-small {
    height: 16px;
    max-height: 16px;
    max-width: 16px;
    min-height: 16px;
    min-width: 16px;
    width: 16px;
  }
  &.is-medium {
    height: 24px;
    max-height: 24px;
    max-width: 24px;
    min-height: 24px;
    min-width: 24px;
    width: 24px;
  }
  &.is-large {
    height: 32px;
    max-height: 32px;
    max-width: 32px;
    min-height: 32px;
    min-width: 32px;
    width: 32px;
  }
}

%delete {
  @include delete;
}

@mixin arrow($rotate: 0, $width: 10px, $height: 10px) {
  display: inline-block;
  content: ' ';
  height: $width;
  width: $height;
  border-width: 1px 1px 0 0;
  border-color: $text;
  border-style: solid;
  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate($rotate);
}

@mixin ltr-position($spacing, $right: true) {
  $normal: if($right, 'right', 'left');
  $opposite: if($right, 'left', 'right');
  @if $rtl {
    #{$opposite}: $spacing;
  } @else {
    #{$normal}: $spacing;
  }
}

@mixin overflow-touch {
  -webkit-overflow-scrolling: touch;
}

@mixin block($spacing: $block-spacing) {
  &:not(:last-child) {
    margin-bottom: $spacing;
  }
}

%block {
  @include block;
}

@mixin scroll-bar {
  $scrollbar-thumb-background: #b4bccc;
  $scrollbar-track-background: #fff;

  &::-webkit-scrollbar {
    z-index: 11;
    width: 6px;

    &:horizontal {
      height: 6px;
    }

    &-thumb {
      border-radius: 5px;
      width: 6px;
      background: $scrollbar-thumb-background;
    }

    &-corner {
      background: $scrollbar-track-background;
    }

    &-track {
      background: $scrollbar-track-background;

      &-piece {
        background: $scrollbar-track-background;
        width: 6px;
      }
    }
  }
}

@mixin vertical-center {
  $selector: &;

  @at-root {
    #{$selector}::after {
      display: inline-block;
      content: '';
      height: 100%;
      vertical-align: middle;
    }
  }
}

@mixin user-select($value) {
  -moz-user-select: $value;
  -webkit-user-select: $value;
  -ms-user-select: $value;
}

@mixin picker-popper($background, $border, $box-shadow) {
  &.rol-popper[role="tooltip"] {
    background: $background;
    border: $border;
    box-shadow: $box-shadow;

    .rol-popper__arrow {
      &::before {
        border: $border;
      }
    }

    @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
      &[data-popper-placement^='#{$placement}'] {
        .rol-popper__arrow::before {
          border-#{$placement}-color: transparent;
          border-#{$adjacency}-color: transparent;
        }
      }
    }
  }
}
 // mixin
$control-radius: $radius !default;
$control-radius-small: $radius-small !default;

$control-border-width: 1px !default;

$control-height: 2.5em !default;
$control-line-height: 1.5 !default;

$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default;
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default;

@mixin control {
  -moz-appearance: none;
  -webkit-appearance: none;
  align-items: center;
  border: $control-border-width solid transparent;
  border-radius: $control-radius;
  box-shadow: none;
  display: inline-flex;
  font-size: $size-normal;
  height: $control-height;
  justify-content: flex-start;
  line-height: $control-line-height;
  padding-bottom: $control-padding-vertical;
  padding-left: $control-padding-horizontal;
  padding-right: $control-padding-horizontal;
  padding-top: $control-padding-vertical;
  position: relative;
  vertical-align: top;
  // States
  &:focus,
  &.is-focused,
  &:active,
  &.is-active {
    outline: none;
  }

  &[disabled],
  fieldset[disabled] & {
    cursor: not-allowed;
  }
}

%control {
  @include control;
}

@mixin control-small {
  border-radius: $control-radius-small;
  font-size: $size-small;
}

@mixin control-medium {
  font-size: $size-medium;
}

@mixin control-large {
  font-size: $size-large;
}

@function mergeColorMaps($rol-colors, $custom-colors) {
  $merged-colors: $rol-colors;

  @if (type-of($custom-colors) == 'map') {
    @each $name, $components in $custom-colors {
      @if (
        type-of($name) ==
          'string' and
          (
            type-of($components) == 'list' or type-of($components) == 'color'
          ) and
          length($components) >=
          1
      ) {
        $color-base: null;
        $color-invert: null;
        $color-light: null;
        $color-dark: null;
        $value: null;

        @if type-of($components) == 'color' {
          $color-base: $components;
          $color-invert: findColorInvert($color-base);
          $color-light: findLightColor($color-base);
          $color-dark: findDarkColor($color-base);
        } @else if type-of($components) == 'list' {
          $color-base: nth($components, 1);

          @if length($components) > 3 {
            $color-invert: nth($components, 2);
            $color-light: nth($components, 3);
            $color-dark: nth($components, 4);
          } @else if length($components) > 2 {
            $color-invert: nth($components, 2);
            $color-light: nth($components, 3);
            $color-dark: findDarkColor($color-base);
          } @else {
            $color-invert: nth($components, 2);
            $color-light: findLightColor($color-base);
            $color-dark: findDarkColor($color-base);
          }
        }

        $value: ($color-base, $color-invert, $color-light, $color-dark);

        @if type-of($color-base) == 'color' {
          $merged-colors: map_merge(
            $merged-colors,
            (
              $name: $value,
            )
          );
        }
      }
    }
  }

  @return $merged-colors;
}

@function powerNumber($number, $exp) {
  $value: 1;
  @if $exp > 0 {
    @for $i from 1 through $exp {
      $value: $value * $number;
    }
  } @else if $exp < 0 {
    @for $i from 1 through -$exp {
      $value: $value / $number;
    }
  }
  @return $value;
}

@function colorLuminance($color) {
  @if type-of($color) != 'color' {
    @return 0.55;
  }
  $color-rgb: (
    'red': red($color),
    'green': green($color),
    'blue': blue($color),
  );
  @each $name, $value in $color-rgb {
    $adjusted: 0;
    $value: $value / 255;
    @if $value < 0.03928 {
      $value: $value / 12.92;
    } @else {
      $value: ($value + 0.055) / 1.055;
      $value: powerNumber($value, 2);
    }
    $color-rgb: map-merge(
      $color-rgb,
      (
        $name: $value,
      )
    );
  }

  @return (map-get($color-rgb, 'red') * 0.2126) +
    (map-get($color-rgb, 'green') * 0.7152) +
    (map-get($color-rgb, 'blue') * 0.0722);
}

@function findColorInvert($color) {
  @if (colorLuminance($color) > 0.55) {
    @return rgba(#000, 0.7);
  } @else {
    @return #fff;
  }
}

@function Rgba($color, $alpha) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return rgba($color, $alpha);
}

@function findLightColor($color) {
  @if type-of($color) == 'color' {
    $l: 96%;
    @if lightness($color) > 96% {
      $l: lightness($color);
    }
    @return change-color($color, $lightness: $l);
  }
  @return $background;
}

@function findDarkColor($color) {
  @if type-of($color) == 'color' {
    $base-l: 29%;
    $luminance: colorLuminance($color);
    $luminance-delta: (0.53 - $luminance);
    $target-l: round($base-l + ($luminance-delta * 53));
    @return change-color($color, $lightness: max($base-l, $target-l));
  }
  @return $text-strong;
}

@function Darken($color, $amount) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return darken($color, $amount);
}

@function Lighten($color, $amount) {
  @if type-of($color) != 'color' {
    @return $color;
  }
  @return lighten($color, $amount);
}

@include bem(popup-parent) {
  @include modify(hidden) {
    overflow: hidden;
  }
}
.v-modal-enter {
  animation: v-modal-in 0.2s ease;
}

.v-modal-leave {
  animation: v-modal-out 0.2s ease forwards;
}

@keyframes v-modal-in {
  0% {
    opacity: 0;
  }
  100% {
  }
}

@keyframes v-modal-out {
  0% {
  }
  100% {
    opacity: 0;
  }
}

.v-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: $black;
}

@function selectorToString($selector) {
  $selector: inspect($selector);
  $selector: str-slice($selector, 2, -2);
  @return $selector;
}

@function containsModifier($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, $modifier-separator) {
    @return true;
  } @else {
    @return false;
  }
}

@function containWhenFlag($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, '.' + $state-prefix) {
    @return true;
  } @else {
    @return false;
  }
}

@function containPseudoClass($selector) {
  $selector: selectorToString($selector);

  @if str-index($selector, ':') {
    @return true;
  } @else {
    @return false;
  }
}

@function hitAllSpecialNestRule($selector) {
  @return containsModifier($selector) or containWhenFlag($selector) or containPseudoClass($selector);
}


// components
$button-color: $text-strong !default;
$button-background-color: $scheme-main !default;
$button-family: false !default;

$button-border-color: $border !default;
$button-border-width: $control-border-width !default;

$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default;
$button-padding-horizontal: 1em !default;

$button-hover-color: $link-hover !default;
$button-hover-border-color: $link-hover-border !default;

$button-focus-color: $link-focus !default;
$button-focus-border-color: $link-focus-border !default;
$button-focus-box-shadow-size: 0 0 0 0.125em !default;

$button-focus-box-shadow-color: Rgba($link, 0.25) !default;

$button-active-color: $link-active !default;
$button-active-border-color: $link-active-border !default;

$button-active-color: $link-active !default;
$button-active-border-color: $link-active-border !default;

$button-text-color: $text !default;
$button-text-decoration: underline !default;
$button-text-hover-background-color: $background !default;
$button-text-hover-color: $text-strong !default;

$button-disabled-background-color: $scheme-main !default;
$button-disabled-border-color: $border !default;
$button-disabled-shadow: none !default;
$button-disabled-opacity: 0.5 !default;

$button-static-color: $text-light !default;
$button-static-background-color: $scheme-main-ter !default;
$button-static-border-color: $border !default;

$button-colors: $colors !default;

@mixin button-mini {
  border-radius: $radius-small;
  font-size: $size-mini;
}

@mixin button-small {
  border-radius: $radius-small;
  font-size: $size-small;
}

@mixin button-normal {
  font-size: $size-normal;
}
@mixin button-medium {
  font-size: $size-medium;
}

@mixin button-large {
  font-size: $size-large;
}

@include bem(button) {
  @extend %control;
  @extend %unselectable;
  padding-bottom: $button-padding-vertical;
  padding-left: $button-padding-horizontal;
  padding-right: $button-padding-horizontal;
  padding-top: $button-padding-vertical;
  background-color: $button-background-color;
  border-color: $button-border-color;
  border-width: $button-border-width;
  color: $button-color;
  cursor: pointer;
  @if $button-family {
    font-family: $button-family;
  }
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  strong {
    color: inherit;
  }

  &-icon {
    &,
    &.is-small,
    &.is-medium,
    &.is-large {
      height: 1.5em;
      width: 1.5em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    &:first-child:not(:last-child) {
      @include ltr-property('margin', calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}), false);
      @include ltr-property('margin', $button-padding-horizontal / 4);
    }

    &:last-child:not(:first-child) {
      @include ltr-property('margin', $button-padding-horizontal / 4, false);
      @include ltr-property('margin', calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width}));
    }

    &:first-child:last-child {
      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width});
      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width});
    }
  }

  &:hover,
  &.is-hovered {
    border-color: $button-hover-border-color;
    color: $button-hover-color;
  }
  &:focus,
  &.is-focused {
    border-color: $button-focus-border-color;
    color: $button-focus-color;
    &:not(:active) {
      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color;
    }
  }
  &:active,
  &.is-active {
    border-color: $button-active-border-color;
    color: $button-active-color;
  }
  &.is-text {
    background-color: transparent;
    border-color: transparent;
    color: $button-text-color;
    text-decoration: $button-text-decoration;
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused {
      background-color: $button-text-hover-background-color;
      color: $button-text-hover-color;
    }

    &:active,
    &.is-active {
      background-color: Darken($button-text-hover-background-color, 5%);
      color: $button-text-hover-color;
    }

    &[disabled],
    fieldset[disabled] & {
      background-color: transparent;
      border-color: transparent;
      box-shadow: none;
    }
  }
  @each $name, $pair in $button-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);

    &.is-#{$name} {
      background-color: $color;
      border-color: transparent;
      color: $color-invert;
      &:hover,
      &.is-hovered {
        background-color: Darken($color, 2.5%);
        border-color: transparent;
        color: $color-invert;
      }
      &:focus,
      &.is-focused {
        border-color: transparent;
        color: $color-invert;
        &:not(:active) {
          box-shadow: $button-focus-box-shadow-size Rgba($color, 0.25);
        }
      }
      &:active,
      &.is-active {
        background-color: Darken($color, 5%);
        border-color: transparent;
        color: $color-invert;
      }
      &[disabled],
      fieldset[disabled] & {
        background-color: $color;
        border-color: transparent;
        box-shadow: none;
      }
      &.is-inverted {
        background-color: $color-invert;
        color: $color;
        &:hover,
        &.is-hovered {
          background-color: Darken($color-invert, 5%);
        }
        &[disabled],
        fieldset[disabled] & {
          background-color: $color-invert;
          border-color: transparent;
          box-shadow: none;
          color: $color;
        }
      }
      &.is-loading {
        &::after {
          border-color: transparent transparent $color-invert $color-invert !important;
        }
      }
      &.is-outlined {
        background-color: transparent;
        border-color: $color;
        color: $color;
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          background-color: $color;
          border-color: $color;
          color: $color-invert;
        }
        &.is-loading {
          &::after {
            border-color: transparent transparent $color $color !important;
          }
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused {
            &::after {
              border-color: transparent transparent $color-invert $color-invert !important;
            }
          }
        }
        &[disabled],
        fieldset[disabled] & {
          background-color: transparent;
          border-color: $color;
          box-shadow: none;
          color: $color;
        }
      }
      &.is-inverted.is-outlined {
        background-color: transparent;
        border-color: $color-invert;
        color: $color-invert;
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused {
          background-color: $color-invert;
          color: $color;
        }
        &.is-loading {
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused {
            &::after {
              border-color: transparent transparent $color $color !important;
            }
          }
        }
        &[disabled],
        fieldset[disabled] & {
          background-color: transparent;
          border-color: $color-invert;
          box-shadow: none;
          color: $color-invert;
        }
      }
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          background-color: $color-light;
          color: $color-dark;
          &:hover,
          &.is-hovered {
            background-color: Darken($color-light, 2.5%);
            border-color: transparent;
            color: $color-dark;
          }
          &:active,
          &.is-active {
            background-color: Darken($color-light, 5%);
            border-color: transparent;
            color: $color-dark;
          }
        }
      }
    }
  }
  &.is-mini {
    @include button-mini;
  }
  &.is-small {
    @include button-small;
  }
  &.is-normal {
    @include button-normal;
  }
  &.is-medium {
    @include button-medium;
  }
  &.is-large {
    @include button-large;
  }

  &[disabled],
  fieldset[disabled] & {
    background-color: $button-disabled-background-color;
    border-color: $button-disabled-border-color;
    box-shadow: $button-disabled-shadow;
    opacity: $button-disabled-opacity;
  }

  &.is-fullwidth {
    display: flex;
    width: 100%;
  }

  &.is-loading {
    color: transparent !important;
    pointer-events: none;
    &::after {
      @extend %loader;
      @include center(1em);
      position: absolute !important;
    }
  }

  &.is-static {
    background-color: $button-static-background-color;
    border-color: $button-static-border-color;
    color: $button-static-color;
    box-shadow: none;
    pointer-events: none;
  }

  &.is-rounded {
    border-radius: $radius-rounded;
    padding-left: calc(#{$button-padding-horizontal} + 0.25em);
    padding-right: calc(#{$button-padding-horizontal} + 0.25em);
  }
  &.is-circle {
    border-radius: 50%;
    padding: 0;
    text-align: center;
    min-width: $control-height;
  }
}

@include bem(buttons) {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  .rol-button {
    margin-bottom: 0.5rem;
    &:not(:last-child):not(.is-fullwidth) {
      @include ltr-property('margin', 0.5rem);
    }
  }
  &:last-child {
    margin-bottom: -0.5rem;
  }
  &:not(:last-child) {
    margin-bottom: 1rem;
  }
  // &.are-small {
  //   .rol-button:not(.is-normal):not(.is-medium):not(.is-large) {
  //     @include button-small;
  //   }
  // }

  // &.are-medium {
  //   .rol-button:not(.is-small):not(.is-normal):not(.is-large) {
  //     @include button-medium;
  //   }
  // }

  // &.are-large {
  //   .rol-button:not(.is-small):not(.is-normal):not(.is-medium) {
  //     @include button-large;
  //   }
  // }
  &.has-addons {
    .rol-button {
      &:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
      }

      &:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        @include ltr-property('margin', -1px);
      }

      &:last-child {
        @include ltr-property('margin', 0);
      }

      &:hover,
      &.is-hovered {
        z-index: 2;
      }
      &:focus,
      &.is-focused,
      &:active,
      &.is-active,
      &.is-selected {
        z-index: 3;
        &:hover {
          z-index: 4;
        }
      }
      &.is-expanded {
        flex-grow: 1;
        flex-shrink: 1;
      }
    }
  }

  &.is-center {
    justify-content: center;
    &:not(.has-addons) {
      .button:not(.is-fullwidth) {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }

  &.is-right {
    justify-content: flex-end;
    &:not(.has-addons) {
      .button:not(.is-fullwidth) {
        margin-left: 0.25rem;
        margin-right: 0.25rem;
      }
    }
  }
}
 // button
[class*='rol-col-'] {
  float: left;
  box-sizing: border-box;
}

.rol-col-0 {
  display: none;
}

@for $i from 0 through 24 {
  .rol-col-#{$i} {
    width: (1 / 24 * $i * 100) * 1%;
  }

  .rol-col-offset-#{$i} {
    margin-left: (1 / 24 * $i * 100) * 1%;
  }

  .rol-col-pull-#{$i} {
    position: relative;
    right: (1 / 24 * $i * 100) * 1%;
  }

  .rol-col-push-#{$i} {
    position: relative;
    left: (1 / 24 * $i * 100) * 1%;
  }
}

@include res(xs) {
  .rol-col-xs-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .rol-col-xs-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xs-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xs-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xs-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(sm) {
  .rol-col-sm-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .rol-col-sm-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-sm-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-sm-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-sm-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(md) {
  .rol-col-md-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .rol-col-md-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-md-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-md-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-md-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(lg) {
  .rol-col-lg-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .rol-col-lg-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-lg-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-lg-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-lg-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include res(xl) {
  .rol-col-xl-0 {
    display: none;
  }
  @for $i from 0 through 24 {
    .rol-col-xl-#{$i} {
      width: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xl-offset-#{$i} {
      margin-left: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xl-pull-#{$i} {
      position: relative;
      right: (1 / 24 * $i * 100) * 1%;
    }

    .rol-col-xl-push-#{$i} {
      position: relative;
      left: (1 / 24 * $i * 100) * 1%;
    }
  }
}

@include bem(row) {
  position: relative;
  box-sizing: border-box;
  @include clearfix;
  @include modify(flex) {
    &:before,
    &:after {
      display: none;
    }
    display: flex;
    @include when(justify-center) {
      justify-content: center;
    }
    @include when(justify-end) {
      justify-content: flex-end;
    }
    @include when(justify-space-between) {
      justify-content: space-between;
    }
    @include when(justify-space-around) {
      justify-content: space-around;
    }

    @include when(align-middle) {
      align-items: center;
    }
    @include when(align-bottom) {
      align-items: flex-end;
    }
  }
}

 // grid
$icon-dimensions: 1.5rem !default;
$icon-dimensions-small: 1rem !default;
$icon-dimensions-medium: 2rem !default;
$icon-dimensions-large: 3rem !default;

@include bem(icon) {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  svg {
    pointer-events: none;
  }
  // height: $icon-dimensions;
  // width: $icon-dimensions;
  // Sizes
  // &.is-small {
  //   height: $icon-dimensions-small;
  //   width: $icon-dimensions-small;
  // }

  // &.is-medium {
  //   height: $icon-dimensions-medium;
  //   width: $icon-dimensions-medium;
  // }

  // &.is-large {
  //   height: $icon-dimensions-large;
  //   width: $icon-dimensions-large;
  // }
}
 //icon
@include bem(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  min-width: 0;

  @include when(vertical) {
    flex-direction: column;
  }
  &,
  * {
    box-sizing: border-box;
  }
}

@include bem(aside) {
  overflow: auto;
  box-sizing: border-box;
  flex-shrink: 0;
}

$main-padding: 20px !default;

@include bem(main) {
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: $main-padding;
}

$footer-padding: 0 20px !default;
@include bem(footer) {
  padding: $footer-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}

$header-padding: 0 20px !default;

@include bem(header) {
  padding: $header-padding;
  box-sizing: border-box;
  flex-shrink: 0;
}


 // layout
$modal-z: 40 !default;

$modal-background-background-color: Rgba($scheme-invert, 0.61) !default;
$modal-content-width: 640px !default;
$modal-content-margin-mobile: 20px !default;
$modal-content-spacing-mobile: 160px !default;
$modal-content-spacing-tablet: 40px !default;

$modal-close-dimensions: 40px !default;
$modal-close-right: 20px !default;
$modal-close-top: 20px !default;

$modal-card-spacing: 40px !default;

$modal-card-head-background-color: $background !default;
$modal-card-head-border-bottom: 1px solid $border !default;
$modal-card-head-padding: 20px !default;
$modal-card-head-radius: $radius-large !default;

$modal-card-title-color: $text-strong !default;
$modal-card-title-line-height: 1 !default;
$modal-card-title-size: $size-4 !default;

$modal-card-foot-radius: $radius-large !default;
$modal-card-foot-border-top: 1px solid $border !default;

$modal-card-body-background-color: $scheme-main !default;
$modal-card-body-padding: 20px !default;

$modal-breakpoint: $tablet !default;

@include bem(modal) {
  @extend %overlay;
  align-items: center;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: fixed;
  z-index: $modal-z;
  &-background {
    @extend %overlay;
    background-color: $modal-background-background-color;
  }
  &.is-centered {
    justify-content: center;
  }
}

$modal: '.rol-modal';

#{$modal}-content,
#{$modal}-card {
  margin: 0 $modal-content-margin-mobile;
  max-height: calc(100vh - #{$modal-content-spacing-mobile});
  overflow: auto;
  position: relative;
  width: 100%;
  // Responsiveness
  @include from($modal-breakpoint) {
    margin: 0 auto;
    max-height: calc(100vh - #{$modal-content-spacing-tablet});
    width: $modal-content-width;
  }
  @include when(fullscreen) {
    width: 100vw;
    margin-top: 0;
    margin-bottom: 0;
    height: 100vh;
    overflow: auto;
    @extend %overlay;
  }
}
#{$modal}-close {
  @extend %delete;
  // background: none;
  // height: $modal-close-dimensions;
  // position: fixed;
  // @include ltr-position($modal-close-right);
  // top: $modal-close-top;
  // width: $modal-close-dimensions;
}
#{$modal}-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - #{$modal-card-spacing});
  overflow: hidden;
  -ms-overflow-y: visible;
  &-head,
  &-foot {
    align-items: center;
    background-color: $modal-card-head-background-color;
    display: flex;
    flex-shrink: 0;
    justify-content: flex-start;
    padding: $modal-card-head-padding;
    position: relative;
  }
  &-head {
    border-bottom: $modal-card-head-border-bottom;
    border-top-left-radius: $modal-card-head-radius;
    border-top-right-radius: $modal-card-head-radius;
  }
  &-title {
    color: $modal-card-title-color;
    flex-grow: 1;
    flex-shrink: 0;
    font-size: $modal-card-title-size;
    line-height: $modal-card-title-line-height;
  }
  &-foot {
    border-bottom-left-radius: $modal-card-foot-radius;
    border-bottom-right-radius: $modal-card-foot-radius;
    border-top: $modal-card-foot-border-top;
    .rol-button {
      &:not(:last-child) {
        @include ltr-property('margin', 0.5em);
      }
    }
  }

  &-body {
    background-color: $modal-card-body-background-color;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: auto;
    padding: $modal-card-body-padding;
    -webkit-overflow-scrolling: touch;
  }
}

.rol-modal-fade-enter-active {
  animation: rol-modal-fade-in 0.3s !important;
}

.rol-modal-fade-leave-active {
  animation: rol-modal-fade-out 0.3s;
}

@keyframes rol-modal-fade-in {
  0% {
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes rol-modal-fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

 // modal
$scrollbar-background-color: Rgba($text-light, 0.3) !default;
$scrollbar-hover-background-color: Rgba($text-light, 0.5) !default;
@include bem(scrollbar) {
  overflow: hidden;
  position: relative;
  &:hover,
  &:active,
  &:focus {
    > .rol-scrollbar__bar {
      opacity: 1;
      transition: opacity 340ms ease-out;
    }
  }
  @include e(wrap) {
    overflow: scroll;
    height: 100%;

    @include modify(hidden-default) {
      scrollbar-width: none;
      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }
    }
  }

  @include e(thumb) {
    position: relative;
    display: block;
    width: 0;
    height: 0;
    cursor: pointer;
    border-radius: inherit;
    background-color: $scrollbar-background-color;
    transition: 0.3s background-color;

    &:hover {
      background-color: $scrollbar-hover-background-color;
    }
  }

  @include e(bar) {
    position: absolute;
    right: 2px;
    bottom: 2px;
    z-index: 1;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 120ms ease-out;
    @include when(vertical) {
      width: 6px;
      top: 2px;

      > div {
        width: 100%;
      }
    }

    @include when(horizontal) {
      height: 6px;
      left: 2px;

      > div {
        height: 100%;
      }
    }
  }
}


$tabs-border-bottom-color: $border !default;
$tabs-border-bottom-style: solid !default;
$tabs-border-bottom-width: 1px !default;
$tabs-link-color: $text !default;
$tabs-link-hover-border-bottom-color: $text-strong !default;
$tabs-link-hover-color: $link !default;
$tabs-link-active-border-bottom-color: $link !default;
$tabs-link-active-color: $link !default;
$tabs-link-padding: 0.5em 1em !default;

$tabs-boxed-link-radius: $radius !default;
$tabs-boxed-link-hover-background-color: $background !default;
$tabs-boxed-link-hover-border-bottom-color: transparent !default;

$tabs-boxed-link-active-background-color: $scheme-main !default;
$tabs-boxed-link-active-border-color: $border !default;
$tabs-boxed-link-active-border-bottom-color: transparent !default;
$tabs-boxed-link-active-hide-baseline-color: $scheme-main !default;

$tabs-toggle-link-border-color: $border !default;
$tabs-toggle-link-border-style: solid !default;
$tabs-toggle-link-border-width: 1px !default;
$tabs-toggle-link-hover-background-color: $background !default;
$tabs-toggle-link-hover-border-color: $border-hover !default;
$tabs-toggle-link-radius: $radius !default;
$tabs-toggle-link-active-background-color: $link !default;
$tabs-toggle-link-active-border-color: $link !default;
$tabs-toggle-link-active-color: $link-invert !default;
$tabs-active-bar: $link !default;
$tabs-header-margin: 15px;

$tabs-scroll-button-text-color: $text-light;

@include bem(tabs) {
  @include e(header) {
    padding: 0;
    position: relative;
    margin: 0 0 $tabs-header-margin;
  }

  @include e(active-bar) {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 1px;
    background-color: $tabs-active-bar;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    list-style: none;
  }

  @include e(nav-scroll) {
    overflow: hidden;
  }

  @include e(nav-wrap) {
    @extend %block;
    @include overflow-touch;
    @extend %unselectable;
    align-items: stretch;
    display: flex;
    font-size: $size-normal;
    justify-content: space-between;
    overflow: hidden;
    // overflow-x: auto;
    white-space: nowrap;
    position: relative;

    @include when(scrollable) {
      margin: 0 20px;
      box-sizing: border-box;
    }
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background-color: $tabs-border-bottom-color;
      z-index: -1;
    }
    &:focus,
    &:focus:active {
      outline: none;
    }
    *:focus {
      outline: none;
    }

    a {
      position: relative;
      align-items: center;
      // border-bottom-color: $tabs-border-bottom-color;
      color: $tabs-link-color;
      display: flex;
      justify-content: center;
      margin-bottom: -#{$tabs-border-bottom-width};
      padding: $tabs-link-padding;
      vertical-align: top;
      margin-bottom: 1px;
      cursor: pointer;
      &:hover {
        color: $tabs-link-hover-color;
        .close-icon {
          color: $tabs-link-active-color;
        }
      }
      .close-icon {
        margin-left: 0.5em;
        color: $text-light;
        width: 1em;
        height: 1em;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.9em;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        &:hover {
          border-radius: 100%;
          color: $tabs-link-active-color;
        }
        // display: flex;
        // align-items: center;
        // justify-content: center;
        // .delete {
        //   transform: scale(0.8);
        //   width: 0;
        //   height: 0;
        //   @extend %delete;
        // }
      }
    }
    li {
      display: block;
      &.is-active {
        a {
          // border-bottom-color: $tabs-link-active-border-bottom-color;
          color: $tabs-link-active-color;
        }
        .close-icon {
          color: $tabs-link-active-color;
        }
      }
      // &.is-closable {
      //   a {
      //     padding-right: calc(1em - 8px);
      //   }
      // }
      // &.is-active.is-closable {
      //   // a {
      //   //   padding-right: 1em;
      //   // }
      //   .close-icon {
      //     width: 1em;
      //     height: 1em;
      //     color: $tabs-link-active-color;
      //   }
      // }
    }
    ul {
      align-items: center;
      border-bottom-color: $tabs-border-bottom-color;
      border-bottom-style: $tabs-border-bottom-style;
      border-bottom-width: $tabs-border-bottom-width;
      display: flex;
      flex-grow: 1;
      flex-shrink: 0;
      justify-content: flex-start;
      position: relative;
      transition: transform 0.3s;
      &.is-align-left {
        padding-right: 0.75em;
      }
      &.is-align-center {
        flex: none;
        justify-content: center;
        padding-left: 0.75em;
        padding-right: 0.75em;
      }
      &.is-align-right {
        justify-content: flex-end;
        padding-left: 0.75em;
      }
    }
    // Alignment
    &.is-centered {
      ul {
        justify-content: center;
      }
    }

    &.is-boxed {
      a {
        border: 1px solid transparent;
        @include ltr {
          border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0;
        }
        @include rtl {
          border-radius: 0 0 $tabs-boxed-link-radius $tabs-boxed-link-radius;
        }
        &:hover {
          background-color: $tabs-boxed-link-hover-background-color;
          border-bottom-color: $tabs-boxed-link-hover-border-bottom-color;
        }
      }
      li {
        position: relative;
        bottom: -2px;
        &.is-active {
          a {
            background-color: $tabs-boxed-link-active-background-color;
            border-color: $tabs-boxed-link-active-border-color;
            border-bottom-color: $tabs-boxed-link-active-border-bottom-color;
            &::after {
              content: '';
              position: absolute;
              bottom: 0;
              height: 1px;
              width: 100%;
              background-color: $tabs-boxed-link-active-hide-baseline-color;
              z-index: 2;
            }
          }
        }
      }
    }
    &.is-fullwidth {
      li {
        flex-grow: 1;
        flex-shrink: 0;
      }
    }
    &.is-small {
      font-size: $size-small;
    }

    &.is-medium {
      font-size: $size-medium;
    }
    &.is-large {
      font-size: $size-large;
    }
  }

  @include e((nav-next, nav-prev)) {
    position: absolute;
    height: 100%;
    width: 20px;
    cursor: pointer;
    line-height: 44px;
    font-size: 12px;
    color: $tabs-scroll-button-text-color;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(nav-next) {
    right: 0;
    &::after {
      @include arrow;
    }
  }
  @include e(nav-prev) {
    left: 0;
    &::after {
      @include arrow(180deg);
    }
  }

  @include modify(bottom) {
    .rol-tabs__header.is-bottom {
      margin-bottom: 0;
      margin-top: $tabs-header-margin;
    }
  }

  @include modify((left, right)) {
    overflow: hidden;

    ul {
      flex-direction: column;
      flex-grow: 0;
    }

    li {
      width: 100%;
    }
    .is-boxed {
      a {
        margin-bottom: 0 !important;
      }
    }

    .rol-tabs__header.is-left,
    .rol-tabs__header.is-right,
    .rol-tabs__nav-wrap.is-left,
    .rol-tabs__nav-wrap.is-right,
    .rol-tabs__nav-scroll {
      height: 100%;
    }

    .rol-tabs__active-bar.is-left,
    .rol-tabs__active-bar.is-right {
      top: 0;
      bottom: auto;
      width: 1px;
      height: auto;
    }

    .rol-tabs__nav-wrap.is-left,
    .rol-tabs__nav-wrap.is-right {
      margin-bottom: 0;

      > .rol-tabs__nav-prev,
      > .rol-tabs__nav-next {
        height: 30px;
        line-height: 30px;
        width: 100%;
        text-align: center;
        cursor: pointer;

        i {
          transform: rotateZ(90deg);
        }
      }
      > .rol-tabs__nav-prev {
        left: auto;
        top: 0;
      }
      > .rol-tabs__nav-next {
        right: auto;
        bottom: 0;
      }

      &.is-scrollable {
        padding: 30px 0;
      }

      &::after {
        height: 100%;
        width: 1px;
        bottom: auto;
        top: 0;
      }
    }
  }

  @include modify(left) {
    .rol-tabs__header.is-left {
      float: left;
      margin-bottom: 0;
      margin-right: 10px;
    }
    .rol-tabs__nav-wrap.is-left {
      &::after {
        left: auto;
        right: 0;
      }

      &.is-boxed {
        li.is-left {
          a {
            border-radius: $tabs-boxed-link-radius 0 0 $tabs-boxed-link-radius;
            &:hover {
              border-right-color: $tabs-boxed-link-hover-border-bottom-color;
            }
          }
          &.is-active {
            a {
              background-color: $tabs-boxed-link-active-background-color;
              border-color: $tabs-boxed-link-active-border-color;
              border-right-color: $tabs-boxed-link-active-border-bottom-color;
              &::after {
                content: '';
                position: absolute;
                right: 0;
                height: 100%;
                width: 1px;
                background-color: $tabs-boxed-link-active-hide-baseline-color;
                z-index: 2;
              }
            }
          }
        }
      }
    }
    .rol-tabs__active-bar.is-left {
      right: 0;
      left: auto;
    }

    a {
      justify-content: flex-end;
    }
  }

  @include modify(right) {
    .rol-tabs__header.is-right {
      float: right;
      margin-bottom: 0;
      margin-left: 10px;
    }
    .rol-tabs__nav-wrap.is-right {
      &::after {
        right: auto;
        left: 0;
      }
      &.is-boxed {
        li.is-right {
          a {
            border-radius: 0 $tabs-boxed-link-radius $tabs-boxed-link-radius 0;
            &:hover {
              border-left-color: $tabs-boxed-link-hover-border-bottom-color;
            }
          }
          &.is-active {
            a {
              border-color: $tabs-boxed-link-active-border-color;
              border-left-color: $tabs-boxed-link-active-border-bottom-color;
              &::after {
                content: '';
                position: absolute;
                left: 0;
                height: 100%;
                width: 1px;
                background-color: $tabs-boxed-link-active-hide-baseline-color;
                z-index: 2;
              }
            }
          }
        }
      }
    }
    .rol-tabs__active-bar.is-right {
      left: 0;
      right: auto;
    }

    a {
      justify-content: flex-start;
    }
  }

  @include e(content) {
    overflow: hidden;
    position: relative;
  }
}

// $popper-border-radius: 4px !default;
// $popper-min-width: 10px !default;
// $popper-padding: 12px !default;
// $popper-padding-large: 18px 20px !default;
// $popper-font-size: $size-small !default;
// $popper-title-font-size: $size-normal !default;
// $popper-title-font-color: $text-strong !default;
// $popper-arrow-size: 6px !default;
// $popper-border-color: $border-light !default;
// $popper-background-color: $background !default;
// $popper-arrow-color: $grey-darker !default;
// $popper-effect-dark: $grey-darker !default;
// $popper-effect-light: $scheme-main !default;

@include bem(popper) {
  position: absolute;
  border-radius: 4px;
  padding: 10px;
  z-index: 2000;
  font-size: 12px;
  line-height: 1.2;
  min-width: 10px;
  word-wrap: break-word;
  visibility: visible;

  $arrow-selector: #{& + '__arrow'};

  @include when(dark) {
    color: $white;
    background: $text;
    #{$arrow-selector}::before {
      background: $text;
      right: 0;
    }
  }

  @include when(light) {
    border: 1px solid $border-light;
    background: $white;
    #{$arrow-selector}::before {
      border: 1px solid $border-light;
      background: $white;
      right: 0;
    }
  }

  @include when(pure) {
    padding: 0;
  }

  @include e(arrow) {
    position: absolute;
    width: 10px;
    height: 10px;
    z-index: -1;

    &::before {
      position: absolute;
      width: 10px;
      height: 10px;
      z-index: -1;
      content: ' ';
      transform: rotate(45deg);
      background: $text;
      box-sizing: border-box;
    }
  }

  $placements: (
    'top': 'bottom',
    'bottom': 'top',
    'left': 'right',
    'right': 'left',
  );

  @each $placement, $opposite in $placements {
    &[data-popper-placement^='#{$placement}'] > #{$arrow-selector} {
      #{$opposite}: -5px;
    }
  }

  @each $placement, $adjacency in ('top': 'left', 'bottom': 'right', 'left': 'bottom', 'right': 'top') {
    &.is-light[data-popper-placement^='#{$placement}'] {
      #{$arrow-selector}::before {
        border-#{$placement}-color: transparent;
        border-#{$adjacency}-color: transparent;
      }
    }
  }
}

$all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$fade-linear-transition: opacity 200ms linear !default;
$md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
$border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;

.fade-in-linear-enter-active,
.fade-in-linear-leave-active {
  transition: $fade-linear-transition;
}
.fade-in-linear-enter-from,
.fade-in-linear-leave-to {
  opacity: 0;
}

.rol-fade-in-linear-enter-active,
.rol-fade-in-linear-leave-active {
  transition: $fade-linear-transition;
}
.rol-fade-in-linear-enter-from,
.rol-fade-in-linear-leave-to{
  opacity: 0;
}

.rol-fade-in-enter-active,
.rol-fade-in-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.rol-fade-in-enter-from,
.rol-fade-in-leave-active {
  opacity: 0;
}

.rol-notification-fade-enter-from {
  &.right {
    right: 0;
    transform: translateX(100%);
  }

  &.left {
    left: 0;
    transform: translateX(-100%);
  }
}

.rol-notification-fade-leave-active {
  opacity: 0;
}

.rol-message-fade-enter-from,
.rol-message-fade-leave-active {
  opacity: 0;
  transform: translate(-50%, -100%) !important;
}

.rol-zoom-in-center-enter-active,
.rol-zoom-in-center-leave-active {
  transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}
.rol-zoom-in-center-enter-from,
.rol-zoom-in-center-leave-active {
  opacity: 0;
  transform: scaleX(0);
}

.rol-zoom-in-top-enter-active,
.rol-zoom-in-top-leave-active {
  opacity: 1;
  transform: scaleY(1);
  transition: $md-fade-transition;
  transform-origin: center top;

  &[data-popper-placement^="'top'"] {
    transform-origin: center bottom;
  }
}
.rol-zoom-in-top-enter-from,
.rol-zoom-in-top-leave-active {
  opacity: 0;
  transform: scaleY(0);
}

.rol-opacity-transition {
  transition: opacity 0.3s cubic-bezier(0.55, 0, 0.1, 1);
}

.horizontal-collapse-transition {
  transition: 0.3s width ease-in-out, 0.3s padding-left ease-in-out, 0.3s padding-right ease-in-out;
}

.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}

.rol-list-enter-active,
.rol-list-leave-active {
  transition: all 1s;
}

.rol-list-enter-from,
.rol-list-leave-active {
  opacity: 0;
  transform: translateY(-30px);
}

$popover-background-color: $white !default;
$popover-border-color: $border !default;
$popover-padding: 12px !default;
$popover-index: 2000 !default;
$popover-color-text-regular: $text !default;
$popover-font-size: $font-size-base !default;
$popover-box-shadow-light: $box-shadow-light !default;
$popover-padding-large: 18px 20px !default;
$popover-title-font-color: $text-strong !default;
$popover-title-font-size: $font-size-medium !default;

.rol-popper {
  &.rol-popover {
    position: absolute;
    background: $popover-background-color;
    min-width: 150px;
    border-radius: 4px;
    border: 1px solid $popover-border-color;
    padding: $popover-padding;
    z-index: $popover-index;
    color: $popover-color-text-regular;
    line-height: 1.4;
    text-align: justify;
    font-size: $popover-font-size;
    box-shadow: $popover-box-shadow-light;
    word-break: break-all;
    &.rol-popover--plain {
      padding: $popover-padding-large;
    }
    .rol-popover__title {
      color: $popover-title-font-color;
      font-size: $popover-title-font-size;
      line-height: 1;
      margin-bottom: 12px;
    }

    .rol-popper__arrow::before {
      border: 1px solid $popover-border-color;
      background: $popover-background-color;
    }
  }
}

@include bem(popconfirm) {
  @include e(main) {
    display: flex;
    align-items: center;
    margin-block-end: 1em;
    margin-block-start: 1em;
  }
  @include e(popIcon) {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
  }
  @include e(action) {
    text-align: right;
    margin: 0;
  }
}

$card-border-color: $border-light !default;
$card-border-radius: 4px !default;
$card-padding: 20px !default;
$card-background-color: $white !default;
$card-text-color-primary: $text !default;

@include bem(card) {
  border-radius: $card-border-radius;
  border: 1px solid $card-border-color;
  background-color: $card-background-color;
  overflow: hidden;
  color: $card-text-color-primary;
  transition: 0.3s;
  @include when(always-shadow) {
    box-shadow: $box-shadow-light;
  }
  @include when(hover-shadow) {
    &:hover,
    &:focus {
      box-shadow: $box-shadow-light;
    }
  }
  @include e(header) {
    padding: #{$card-padding - 2 $card-padding};
    border-bottom: 1px solid $card-border-color;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }
  @include e(body) {
    padding: $card-padding;
  }
}

%size {
  width: 100%;
  height: 100%;
}

%arrow {
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  font-size: 24px;
  color: $white;
  background-color: $grey-lighter;
  border-color: $white;
}

$image-background-color: $white-bis !default;
$image-color-text-placeholder: $text-light !default;

@include bem(image) {
  position: relative;
  display: inline-block;
  overflow: hidden;

  @include e(inner) {
    @extend %size;
    vertical-align: top;
    @include modify(center) {
      position: relative;
      top: 50%;
      left: 50%;
      transform: translate(-50%, 50%);
      display: block;
    }
  }
  @include e(placeholder) {
    @extend %size;
    background: $image-background-color;
  }
  @include e(error) {
    @extend %size;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    background: $image-background-color;
    color: $image-color-text-placeholder;
    vertical-align: middle;
  }
  @include e(preview) {
    cursor: pointer;
  }
}
@include bem(image-viewer) {
  @include e(wrapper) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
  @include e(btn) {
    position: absolute;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0.8;
    cursor: pointer;
    box-sizing: border-box;
    user-select: none;
  }

  @include e(close) {
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    font-size: 40px;
  }

  @include e(canvas) {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  @include e(actions) {
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    width: 282px;
    height: 44px;
    padding: 0 23px;
    background-color: $grey-lighter;
    border-color: $white;
    border-radius: 22px;

    @include e(actions__inner) {
      width: 100%;
      height: 100%;
      text-align: justify;
      cursor: pointer;
      font-size: 23px;
      color: $white;
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }

  @include e(prev) {
    @extend %arrow;
    left: 40px;
  }
  @include e(next) {
    @extend %arrow;
    right: 40px;
  }

  @include e(mask) {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background-color: $black;
  }
}

.viewer-fade-enter-active {
  animation: viewer-fade-in 0.3s;
}

.viewer-fade-leave-active {
  animation: viewer-fade-out 0.3s;
}

@keyframes viewer-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes viewer-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

$carousel-arrow-font-size: 12px !default;
$carousel-arrow-size: 36px !default;
$carousel-arrow-background: Rgba($black-ter, 0.11) !default;
$carousel-arrow-hover-background: Rgba($black-ter, 0.23) !default;
$carousel-indicator-width: 30px !default;
$carousel-indicator-height: 2px !default;
$carousel-indicator-padding-horizontal: 2px !default;
$carousel-indicator-padding-vertical: 12px !default;
$carousel-indicator-out-color: $border-hover !default;

@include bem(carousel) {
  position: relative;
  @include modify(horizontal) {
    overflow-x: hidden;
  }

  @include modify(vertical) {
    overflow-y: hidden;
  }

  @include e(container) {
    position: relative;
    height: 300px;
  }

  @include e(arrow) {
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: $carousel-arrow-size;
    width: $carousel-arrow-size;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 50%;
    background-color: $carousel-arrow-background;
    color: $white;
    position: absolute;
    top: 50%;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: $carousel-arrow-font-size;
    display: flex;
    align-items: center;
    justify-content: center;

    @include modify(left) {
      left: 16px;
    }

    @include modify(right) {
      right: 16px;
    }
    &:hover {
      background-color: $carousel-arrow-hover-background;
    }

    & i {
      cursor: pointer;
    }
  }

  @include e(indicators) {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: #{$index-normal + 1};

    @include modify(horizontal) {
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    @include modify(vertical) {
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    @include modify(outside) {
      bottom: #{$carousel-indicator-height + $carousel-indicator-padding-vertical * 2};
      text-align: center;
      position: static;
      transform: none;
      .rol-carousel__indicator:hover button {
        opacity: 0.64;
      }
      button {
        background-color: $carousel-indicator-out-color;
        opacity: 0.24;
      }
    }
    @include modify(labels) {
      left: 0;
      right: 0;
      transform: none;
      text-align: center;
      .rol-carousel__button {
        height: auto;
        width: auto;
        padding: 2px 18px;
        font-size: 12px;
      }
      .rol-carousel__indicator {
        padding: 6px 4px;
      }
    }
  }
  @include e(indicator) {
    background-color: transparent;
    cursor: pointer;

    &:hover button {
      opacity: 0.72;
    }

    @include modify(horizontal) {
      display: inline-block;
      padding: $carousel-indicator-padding-vertical $carousel-indicator-padding-horizontal;
    }
    @include modify(vertical) {
      padding: $carousel-indicator-padding-horizontal $carousel-indicator-padding-vertical;
      .rol-carousel__button {
        width: $carousel-indicator-height;
        height: #{$carousel-indicator-width / 2};
      }
    }

    @include when(active) {
      button {
        opacity: 1;
      }
    }
  }
  @include e(button) {
    display: block;
    opacity: 0.48;
    width: $carousel-indicator-width;
    height: $carousel-indicator-height;
    background-color: $white;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.3s;
  }
}

.carousel-arrow-left-enter-active,
.carousel-arrow-left-leave-active {
  transform: translate3d(-10px, -50%, 0);
  opacity: 0;
}

.carousel-arrow-right-enter-active,
.carousel-arrow-right-leave-active {
  transform: translate3d(10px, -50%, 0);
  opacity: 0;
}

@include bem(carousel) {
  @include e(item) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
    z-index: #{$index-normal - 1};

    @include when(active) {
      z-index: #{$index-normal + 1};
    }
    @include when(animating) {
      transition: transform 0.4s ease-in-out;
    }
    @include modify(card) {
      width: 50%;
      transition: transform 0.4s ease-in-out;
      &.is-in-stage {
        cursor: pointer;
        z-index: $index-normal;
        &:hover .rol-carousrol__mask,
        &.is-hover .rol-carousrol__mask {
          opacity: 0.12;
        }
      }
      &.is-active {
        z-index: #{$index-normal + 1};
      }
    }
    @include e(mask) {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: $white;
      opacity: 0.24;
      transition: 0.2s;
    }
  }
}


$collapse-border-color: $border-light !default;
$collapse-font-color-disabled-base: $grey-light !default;
$collapse-header-height: $size-1 !default;
$collapse-header-background-color: $white !default;
$collapse-header-font-color: $text !default;
$collapse-header-font-size: $font-size-small !default;
$collapse-header-font-weight: $weight-medium !default;
$collapse-header-arrow-font-weight: $weight-light !default;
$collapse-content-background-color: $white !default;
$collapse-content-font-size: $font-size-small !default;
$collapse-content-font-color: $text !default;

@include bem(collapse) {
  border-top: 1px solid $collapse-border-color;
  border-bottom: 1px solid $collapse-border-color;
}

@include bem('collapse-item') {
  @include when(disabled) {
    .rol-collapse-item__header {
      color: $collapse-font-color-disabled-base;
      cursor: not-allowed;
    }
  }
  @include e(header) {
    display: flex;
    align-items: center;
    height: $collapse-header-height;
    line-height: $collapse-header-height;
    background-color: $collapse-header-background-color;
    color: $collapse-header-font-color;
    cursor: pointer;
    border-bottom: 1px solid $collapse-border-color;
    font-size: $collapse-header-font-size;
    font-weight: $collapse-header-font-weight;
    transition: border-bottom-color 0.3s;
    outline: none;
    @include e(arrow) {
      margin: 0 8px 0 auto;
      transition: transform 0.3s;
      font-weight: $collapse-header-arrow-font-weight;
      transform-origin: left center;
      @include when(active) {
        transform: rotate(90deg);
      }
    }
    &.focusing:focus:not(:hover) {
      color: $collapse-header-font-color;
    }
    @include when(active) {
      border-bottom-color: transparent;
    }
  }

  @include e(wrap) {
    will-change: height;
    background-color: $collapse-content-background-color;
    overflow: hidden;
    box-sizing: border-box;
    border-bottom: 1px solid $collapse-border-color;
  }

  @include e(content) {
    padding-bottom: 25px;
    font-size: $collapse-content-font-size;
    color: $collapse-content-font-color;
    line-height: 1.769230769230769;
  }

  &:last-child {
    margin-bottom: -1px;
  }
}
.collapse-transition {
  transition: 0.3s height ease-in-out, 0.3s padding-top ease-in-out, 0.3s padding-bottom ease-in-out;
}

@include bem(divider) {
  background-color: $border-light;
  position: relative;
  @include modify(horizontal) {
    display: block;
    height: 1px;
    width: 100%;
    margin: 24px 0;
  }
  @include modify(vertical) {
    display: inline-block;
    width: 1px;
    height: 1em;
    margin: 0 8px;
    vertical-align: middle;
    position: relative;
  }

  @include e(text) {
    position: absolute;
    background-color: $white;
    padding: 0 20px;
    font-weight: $weight-medium;
    color: $text;
    font-size: $font-size-base;
    @include when(left) {
      left: 20px;
      transform: translateY(-50%);
    }

    @include when(center) {
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
    }

    @include when(right) {
      right: 20px;
      transform: translateY(-50%);
    }
  }
}

$breadcrumb-item-color: $link !default;
$breadcrumb-item-hover-color: $link-hover !default;
$breadcrumb-item-active-color: $text-strong !default;
$breadcrumb-item-text-color: $text-light !default;

$breadcrumb-item-padding-vertical: 0 !default;
$breadcrumb-item-padding-horizontal: 0.75em !default;

$breadcrumb-item-separator-color: $border-hover !default;

@include bem(breadcrumb) {
  @extend %block;
  @extend %unselectable;
  font-size: $size-normal;
  white-space: nowrap;
  @include e(item) {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal;
    color: $breadcrumb-item-text-color;
    &.is-link,
    a {
      cursor: pointer;
      color: $breadcrumb-item-color;
      text-decoration: none;
      transition: $color-transition-base;
      &:hover {
        color: $breadcrumb-item-hover-color;
      }
    }
  }
  li {
    align-items: center;
    display: flex;
    &:first-child {
      .rol-breadcrumb__item {
        @include ltr-property('padding', 0, false);
      }
      .rol-breadcrumb__separator {
        display: none;
      }
    }
    &:last-child {
      .rol-breadcrumb__item {
        &.is-link,
        a {
          color: $breadcrumb-item-active-color;
          cursor: default;
          pointer-events: none;
        }
      }
    }
    @include e(separator) {
      color: $breadcrumb-item-separator-color;
      content: '\0002f';
    }
  }
  ul,
  ol {
    align-items: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  //   @include modify(icon) {
  //     &:first-child {
  //       @include ltr-property('margin', 0.5em);
  //     }
  //     &:last-child {
  //       @include ltr-property('margin', 0.5em, false);
  //     }
  //   }

  &.is-centered {
    ol,
    ul {
      justify-content: center;
    }
  }
  &.is-right {
    ol,
    ul {
      justify-content: flex-end;
    }
  }
  // Sizes
  &.is-small {
    font-size: $size-small;
  }
  &.is-medium {
    font-size: $size-medium;
  }
  &.is-large {
    font-size: $size-large;
  }
}

$dropdown-color-text-regular: $text !default;
$dropdown-font-size-base: $font-size-base !default;
$button-border-color: $border !default;
$dropdown-border-radius-base: 4px !default;
$dropdown-dropdown-menu-box-shadow: $box-shadow-light !default;
$dropdown-menuItem-hover-fill: $white !default;
// $dropdown-menuItem-hover-fill: $link !default;
$dropdown-menuItem-hover-color: $scheme-invert !default;
// $dropdown-menuItem-hover-color: $link-invert !default;
$dropdown-border-color-lighter: $border-light !default;
$dropdown-font-color-disabled-base: $text-light !default;
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.02) !default;

// @include bem(dropdown-popper) {
//   padding: 0px;
//   box-shadow: $dropdown-content-shadow;
//   @include when(light) {
//     border: 1px solid $grey-lighter;
//     .rol-popper__arrow::before {
//       border: 1px solid $grey-lighter;
//       background: $white;
//     }
//   }
//   .rol-dropdown-menu {
//     border: none;
//   }
// }

@include bem(dropdown) {
  display: inline-block;
  position: relative;
  color: $dropdown-color-text-regular;
  font-size: $dropdown-font-size-base;

  @include e(popper) {
    @include picker-popper($white, 1px solid $border-light, $dropdown-dropdown-menu-box-shadow);

    .rol-dropdown-menu {
      border: none;
    }

    #{& + '-selfdefine'} {
      outline: none;
    }
  }

  .rol-button-group {
    display: block;

    .rol-button {
      float: none;
    }
  }

  & .rol-dropdown__caret-left-button {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & .rol-dropdown__caret-button {
    padding-left: 7px;
    padding-right: 7px;
    position: relative;
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    .rol-icon {
      width: 100%;
      height: 100%;
      display: flex;
    }
    &::before {
      $gap: 5px;

      content: '';
      position: absolute;
      display: block;
      width: 1px;
      top: $gap;
      bottom: $gap;
      left: 0;
      background: mix(white, transparent, 50%);
    }

    &:hover {
      &::before {
        top: 0;
        bottom: 0;
      }
    }

    & .rol-dropdown__icon {
      padding-left: 0;
    }
  }

  @include e(icon) {
    font-size: 12px;
    margin: 0 3px;

    &.rol-dropdown-selfdefine {
      outline: none;

      &:focus:active,
      &:focus:not(.focusing) {
        outline-width: 0;
      }
    }
  }
}

@include bem(dropdown-menu) {
  position: relative;
  top: 0;
  left: 0;
  z-index: 10;
  padding: 10px 0;
  margin: 0;
  background-color: $white;
  border: none;
  border-radius: $dropdown-border-radius-base;
  box-shadow: none;

  @include e(item) {
    list-style: none;
    line-height: 36px;
    padding: 0 20px;
    margin: 0;
    font-size: $font-size-base;
    color: $text;
    cursor: pointer;
    outline: none;

    &:not(.is-disabled):hover,
    &:focus {
      background-color: $dropdown-menuItem-hover-fill;
      color: $dropdown-menuItem-hover-color;
    }

    i {
      margin-right: 5px;
    }

    @include modify(divided) {
      $divided-offset: 6px;

      position: relative;
      margin-top: $divided-offset;
      border-top: 1px solid $dropdown-border-color-lighter;

      &::before {
        content: '';
        height: $divided-offset;
        display: block;
        margin: 0 -20px;
        background-color: $white;
      }
    }

    @include when(disabled) {
      cursor: default;
      color: $dropdown-font-color-disabled-base;
      pointer-events: none;
    }
  }

  @include modify(large) {
    padding: 16px 0;

    @include e(item) {
      line-height: 44px;
      padding: 0 24px;
      font-size: 16px;

      &.rol-dropdown-menu__item--divided {
        $divided-offset: 10px;

        margin-top: $divided-offset;

        &::before {
          height: $divided-offset;
          margin: 0 -24px;
        }
      }
    }
  }

  @include modify(medium) {
    padding: 14px 0;

    @include e(item) {
      line-height: 40px;
      padding: 0 22px;
      font-size: 14px;

      &.rol-dropdown-menu__item--divided {
        $divided-offset: 8px;

        margin-top: $divided-offset;

        &::before {
          height: $divided-offset;
          margin: 0 -22px;
        }
      }
    }
  }

  @include modify(small) {
    padding: 4.5px 0;

    @include e(item) {
      line-height: 25.5px;
      padding: 0 12.5px;
      font-size: 12px;

      &.rol-dropdown-menu__item--divided {
        $divided-offset: 4px;

        margin-top: $divided-offset;

        &::before {
          height: $divided-offset;
          margin: 0 -12.5px;
        }
      }
    }
  }
}

@include bem(page-header) {
  display: flex;
  line-height: 24px;
  @include e(left) {
    display: flex;
    cursor: pointer;
    margin-right: 40px;
    position: relative;
    &::after {
      content: '';
      position: absolute;
      width: 1px;
      height: 16px;
      right: -20px;
      top: 50%;
      transform: translateY(-50%);
      background-color: $border;
    }

    .rol-icon-back {
      font-size: 16px;
      margin-right: 6px;
      align-self: center;
    }
    @include e(title) {
      font-size: 14px;
      font-weight: 500;
    }
  }

  @include e(content) {
    font-size: 18px;
    color: $text;
  }
}

$notification-background-color: $background !default;
$notification-code-background-color: $scheme-main !default;
$notification-radius: $radius !default;
$notification-padding: 1rem 1.5.5rem 1rem 1.5rem !default;
$notification-padding-ltr: 1rem 1.5rem 1rem 1rem !default;
$notification-padding-rtl: 1rem 1rem 1rem 1.5rem !default;
$notification-width: 330px !default;
$notification-colors: $colors !default;

@include bem(notification) {
  @extend %block;
  width: $notification-width;
  background-color: $notification-background-color;
  border-radius: $notification-radius;
  position: fixed;
  transition: opacity 0.3s, transform 0.3s, left 0.3s, right 0.3s, top 0.4s, bottom 0.3s;
  overflow: hidden;
  z-index: $index-top;

  &.right {
    right: 16px;
  }

  &.left {
    left: 16px;
  }
  @include ltr {
    padding: $notification-padding-ltr;
  }

  @include rtl {
    padding: $notification-padding-rtl;
  }
  a:not(.button):not(.dropdown-item) {
    color: currentColor;
    text-decoration: underline;
  }

  @include e(content) {
    margin: 0;
    font-size: $size-small;
  }

  @include e(title) {
    font-weight: bold;
    font-size: $size-normal;
    margin: 0;
    margin-bottom: 0.5em;
  }

  strong {
    color: currentColor;
  }
  code,
  pre {
    background: $notification-code-background-color;
  }
  pre code {
    background: transparent;
  }
  & > .delete {
    @include ltr-position(0.5rem);
    position: absolute;
    top: 0.5rem;
    @extend %delete;
  }

  .title,
  .subtitle,
  .content {
    color: currentColor;
  }
  // Colors
  @each $name, $pair in $notification-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;
      // If light and dark colors are provided
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          background-color: $color-light;
          color: $color-dark;
        }
      }
    }
  }
}

$message-min-width: 380px !default;
$message-shadow: $box-shadow-base !default;
$message-background-color: $background !default;
$message-padding: $size-6 $size-6 $size-6 $size-5 !default;
$message-success-font-color: $success !default;
$message-info-font-color: $info !default;
$message-warning-font-color: $warning !default;
$message-danger-font-color: $danger !default;
$message-primary-font-color: $primary !default;
$message-link-font-color: $link !default;
$message-colors: $colors;

@include bem(message) {
  min-width: $message-min-width;
  box-sizing: border-box;
  border-radius: 4px;
  border-width: 1px;
  border-style: solid;
  border-color: $border-light;
  position: fixed;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  background-color: $message-background-color;
  transition: opacity 0.3s, transform 0.4s, top 0.4s;
  overflow: hidden;
  padding: $message-padding;
  display: flex;
  align-items: center;
  justify-content: space-between;
  @include when(center) {
    justify-content: center;
  }
  @include when(closable) {
    padding-right: $size-6;
    .rol-message__content {
      padding-right: 16px;
    }
  }
  @each $name, $pair in $notification-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    @include modify(#{$name}) {
      background-color: $color;
      color: $color-invert;
      .rol-message__content {
        color: $color-invert;
      }
      // If light and dark colors are provided
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          background-color: $color-light;
          color: $color-dark;
          .rol-message__content {
            color: $color-dark;
          }
        }
      }
    }
  }
  @include e(icon) {
    margin-right: $size-7;
  }

  @include e(content) {
    padding: 0;
    font-size: 14px;
    line-height: 1;
    &:focus {
      outline-width: 0;
    }
  }

  @include e(closeBtn) {
    @extend %delete;
  }
}

$alert-background: $background !default;
$alert-padding: $size-8 $size-6 !default;
$alert-border-radius: 4px !default;
$alert-title-font-size: $font-size-small !default;
$alert-description-font-size: $font-size-extra-small !default;
$alert-colors: $colors;
@include bem(alert) {
  width: 100%;
  padding: $alert-padding;
  margin: 0;
  box-sizing: border-box;
  border-radius: $alert-border-radius;
  position: relative;
  background-color: $alert-background;
  overflow: hidden;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: opacity 0.2s;
  @include when(center) {
    justify-content: center;
  }

  @each $name, $pair in $alert-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    @include modify(#{$name}) {
      background-color: $color;
      color: $color-invert;
      .rol-alert__description {
        color: $color-invert;
      }
      // If light and dark colors are provided
      @if length($pair) >= 4 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          background-color: $color-light;
          color: $color-dark;
          .rol-alert__description {
            color: $color-dark;
          }
        }
      }
    }
  }

  @include e(content) {
    display:table-cell;
    padding: 0 $size-8
  }

  @include e(title) {
    font-size: $alert-title-font-size;
    line-height: 1.1;
    align-items: center;
    justify-content: center;
    @include when(bold) {
      font-weight: bold;
    }
  }

  & .rol-alert__description {
    font-size: $alert-description-font-size;
    margin: 5px 0 0 0;
  }

  @include e(closebtn) {
    @extend %delete;
    font-size: $font-size-extra-small;
    opacity: 1;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
  }
}

.rol-alert-fade-enter-from,
.rol-alert-fade-leave-active {
  opacity: 0;
}

$loading-spinner-size: 42px !default;
$loading-fullscreen-spinner-size: 50px !default;

@include bem(loading-parent) {
  @include modify(relative) {
    position: relative !important;
  }
  @include modify(hidden) {
    overflow: hidden !important;
  }
}

@include bem(loading-mask) {
  position: absolute;
  z-index: 2000;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity 0.3s;

  @include when(fullscreen) {
    position: fixed;
    .rol-loading-spinner {
      margin-top: #{- $loading-fullscreen-spinner-size / 2};

      .circular {
        height: $loading-fullscreen-spinner-size;
        width: $loading-fullscreen-spinner-size;
      }
    }
  }
}

@include bem(loading-spinner) {
  top: 50%;
  margin-top: #{- $loading-spinner-size / 2};
  width: 100%;
  text-align: center;
  position: absolute;

  .rol-loading-text {
    color: $primary;
    margin: 3px 0;
    font-size: $size-6;
  }
  .circular {
    display: inline;
    color: $primary;
    height: $loading-spinner-size;
    width: $loading-spinner-size;
    animation: loading-rotate 2s linear infinite;
  }

  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: $primary;
    stroke-linecap: round;
  }
}

.rol-loading-fade-enter-from,
.rol-loading-fade-leave-active {
  opacity: 0;
}

@keyframes loading-rotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }
  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

$message-width: 27rem !default;
$message-background-color: $white !default;
$message-radius: $radius !default;

$message-header-background-color: $text !default;
$message-header-color: $text-invert !default;
$message-header-weight: $weight-bold !default;
$message-header-padding: 0.75em 1em !default;
$message-header-radius: $radius !default;

$message-body-border-color: $border !default;
$message-body-border-width: 0 0 0 4px !default;
$message-body-color: $text !default;
$message-body-padding: 0.75em 1em !default;
$message-body-radius: $radius !default;

$message-body-pre-background-color: $scheme-main !default;
$message-body-pre-code-background-color: transparent !default;

$message-header-body-border-width: 0 !default;
$message-colors: $colors !default;

@include bem(message-box) {
  display: inline-block;
  width: $message-width;
  padding-bottom: 10px;
  vertical-align: middle;
  background-color: $message-background-color;
  border-radius: $message-radius;
  border: 1px solid $border-light;
  font-size: $size-normal;
  box-shadow: $box-shadow-light;
  text-align: left;
  overflow: hidden;
  backface-visibility: hidden;

  @include e(wrapper) {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;

    &::after {
      content: '';
      display: inline-block;
      height: 100%;
      width: 0;
      vertical-align: middle;
    }
  }

  @include e(header) {
    position: relative;
    padding: $message-header-padding;
    padding-bottom: 10px;
  }

  @include e(title) {
    padding-left: 0;
    margin-bottom: 0;
    font-size: $size-medium;
    line-height: 1;
    color: $text;
  }

  @include e(headerbtn) {
    position: absolute;
    top: 0.75em;
    right: 0.75em;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1em;
    cursor: pointer;
    color: $text;

    .rol-message-box__close {
      color: $info;
    }

    &:focus,
    &:hover {
      .rol-message-box__close {
        color: $primary;
      }
    }
  }

  @include e(content) {
    padding: $message-body-padding;
    color: $message-body-color;
    font-size: $size-normal;
  }

  @include e(container) {
    position: relative;
  }

  @include e(input) {
    padding-top: 15px;

    & input.invalid {
      border-color: $danger;
      &:focus {
        border-color: $danger;
      }
    }
  }

  @include e(status) {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
    display: flex;
    align-items: center;

    + .rol-message-box__message {
      padding-left: 36px;
      padding-right: 12px;
    }

    & .rol-icon-success {
      color: $success;
    }

    & .rol-icon-info {
      color: $info;
    }

    & .rol-icon-warning {
      color: $warning;
    }

    & .rol-icon-error {
      color: $danger;
    }
  }

  @include e(message) {
    margin: 0;

    & p {
      margin: 0;
      line-height: 24px;
    }
  }

  @include e(errormsg) {
    color: $danger;
    font-size: $size-7;
    min-height: 18px;
    margin-top: 2px;
  }

  @include e(btns) {
    padding: 5px 15px 0;
    text-align: right;

    & button:nth-child(2) {
      margin-left: 10px;
    }
  }

  @include e(btns-reverse) {
    flex-direction: row-reverse;
  }

  // centerAlign 布局
  @include modify(center) {
    padding-bottom: 30px;

    @include e(header) {
      padding-top: 30px;
    }

    @include e(title) {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    @include e(status) {
      position: relative;
      top: auto;
      padding-right: 5px;
      text-align: center;
      transform: translateY(-1px);
    }

    @include e(message) {
      margin-left: 0;
    }

    @include e((btns, content)) {
      text-align: center;
    }

    @include e(content) {
      $padding-horizontal: calc($size-6 + 12px);

      padding-left: $padding-horizontal;
      padding-right: $padding-horizontal;
    }
  }
}

.msgbox-fade-enter-active {
  animation: msgbox-fade-in 0.3s;
}

.msgbox-fade-leave-active {
  animation: msgbox-fade-out 0.3s;
}

@keyframes msgbox-fade-in {
  0% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes msgbox-fade-out {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -20px, 0);
    opacity: 0;
  }
}

// @include bem(message-box) {
//   @extend %block;
//   background-color: $message-background-color;
//   border-radius: $message-radius;
//   font-size: $size-normal;
//   strong {
//     color: currentColor;
//   }

//   a:not(.rol-button):not(.rol-tag):not(.rol-dropdown-item) {
//     color: currentColor;
//     text-decoration: underline;
//   }

//   &.is-small {
//     font-size: $size-small;
//   }
//   &.is-medium {
//     font-size: $size-medium;
//   }
//   &.is-large {
//     font-size: $size-large;
//   }

//   @include e(wrapper) {
//     position: fixed;
//     top: 0;
//     bottom: 0;
//     left: 0;
//     right: 0;
//     text-align: center;

//     &::after {
//       content: "";
//       display: inline-block;
//       height: 100%;
//       width: 0;
//       vertical-align: middle;
//     }
//   }

//   @each $name, $components in $message-colors {
//     $color: nth($components, 1);
//     $color-invert: nth($components, 2);
//     $color-light: null;
//     $color-dark: null;

//     @if length($components) >= 3 {
//       $color-light: nth($components, 3);
//       @if length($components) >= 4 {
//         $color-dark: nth($components, 4);
//       } @else {
//         $color-luminance: colorLuminance($color);
//         $darken-percentage: $color-luminance * 70%;
//         $desaturate-percentage: $color-luminance * 30%;
//         $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage);
//       }
//     } @else {
//       $color-lightning: max((100% - lightness($color)) - 2%, 0%);
//       $color-light: lighten($color, $color-lightning);
//     }
//     &.is-#{$name} {
//       background-color: $color-light;
//       .rol-message-box--header {
//         background-color: $color;
//         color: $color-invert;
//       }

//       .rol-message-box--body {
//         border-color: $color;
//         color: $color-dark;
//       }
//     }
//   }

//   @include e(header) {
//     align-items: center;
//     background-color: $message-header-background-color;
//     border-radius: $message-header-radius $message-header-radius 0 0;
//     color: $message-header-color;
//     display: flex;
//     font-weight: $message-header-weight;
//     justify-content: space-between;
//     line-height: 1.25;
//     padding: $message-header-padding;
//     position: relative;
//     .delete {
//       flex-grow: 0;
//       flex-shrink: 0;
//       @include ltr-property('margin', 0.75em, false);
//     }

//     & + .message-body {
//       border-width: $message-header-body-border-width;
//       border-top-left-radius: 0;
//       border-top-right-radius: 0;
//     }
//   }

//   @include modify(body) {
//       @debug &;
//     border-color: $message-body-border-color;
//     border-radius: $message-body-radius;
//     border-style: solid;
//     border-width: $message-body-border-width;
//     color: $message-body-color;
//     padding: $message-body-padding;
//     code,
//     pre {
//       background-color: $message-body-pre-background-color;
//     }
//     pre code {
//       background-color: $message-body-pre-code-background-color;
//     }
//   }
// }

$input-font-size: $font-size-base !default;
/// color||Color|0
$input-font-color: $text !default;
/// height||Other|4
$input-width: 140px !default;
/// height||Other|4
$input-height: 40px !default;
$input-border: 1px solid $border !default;
$input-border-color: $grey-light !default;
/// borderRadius||Border|2
$input-border-radius: 4px !default;
$input-border-color-hover: $grey-lighter !default;
/// color||Color|0
$input-background-color: $white !default;
$input-fill-disabled: $background !default;
$input-color-disabled: $text-light !default;
/// color||Color|0
$input-icon-color: $grey-lighter !default;
/// color||Color|0
$input-placeholder-color: $grey-lighter !default;
$input-max-width: 314px !default;

$input-hover-border: $grey !default;
$input-clear-hover-color: $grey-light !default;

$input-focus-border: $link !default;
$input-focus-fill: $white !default;

$input-disabled-fill: $background !default;
$input-disabled-border: $grey-lighter !default;
$input-disabled-color: $text-strong !default;
$input-disabled-placeholder-color: $grey-lighter !default;

/// fontSize||Font|1
$input-medium-font-size: 14px !default;
/// height||Other|4
$input-medium-height: 36px !default;
/// fontSize||Font|1
$input-small-font-size: 13px !default;
/// height||Other|4
$input-small-height: 32px !default;
/// fontSize||Font|1
$input-mini-font-size: 12px !default;
/// height||Other|4
$input-mini-height: 28px !default;

@include bem(textarea) {
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: bottom;
  font-size: $font-size-base;
  @include e(inner) {
    display: block;
    resize: vertical;
    padding: 5px 15px;
    line-height: 1.5;
    box-sizing: border-box;
    width: 100%;
    font-size: inherit;
    color: $input-font-color;
    background-color: $input-background-color;
    background-image: none;
    border: $input-border;
    border-radius: $input-border-radius;
    transition: $border-transition-base;

    &::placeholder {
      color: $input-placeholder-color;
    }

    &:hover {
      border-color: $input-hover-border;
    }

    &:focus {
      outline: none;
      border-color: $input-focus-border;
    }
  }

  & .rol-input__count {
    color: $info;
    background-color: $white;
    position: absolute;
    font-size: 12px;
    bottom: 5px;
    right: 10px;
  }

  @include when(disabled) {
    .rol-textarea__inner {
      background-color: $input-disabled-fill;
      border-color: $input-disabled-border;
      color: $input-disabled-color;
      cursor: not-allowed;

      &::placeholder {
        color: $input-disabled-placeholder-color;
      }
    }
  }

  @include when(exceed) {
    .rol-textarea__inner {
      border-color: $danger;
    }

    .rol-input__count {
      color: $danger;
    }
  }
}

@include bem(input) {
  position: relative;
  font-size: $font-size-base;
  display: inline-block;
  width: 100%;
  @include scroll-bar;

  &:focus {
    outline: none;
    -webkit-appearance: none;
  }

  & .rol-input__clear {
    color: $font-size-base;
    font-size: $input-font-size;
    cursor: pointer;
    transition: $color-transition-base;

    &:hover {
      color: $input-clear-hover-color;
    }
  }
  & .rol-input__count {
    height: 100%;
    display: inline-flex;
    align-items: center;
    color: $info;
    font-size: 12px;

    .rol-input__count-inner {
      background: $white;
      line-height: initial;
      display: inline-block;
      padding: 0 5px;
    }
  }

  @include e(inner) {
    -webkit-appearance: none;
    background-color: $input-background-color;
    background-image: none;
    border-radius: $input-border-radius;
    border: $input-border;
    box-sizing: border-box;
    color: $input-font-color;
    display: inline-block;
    font-size: inherit;
    height: $input-height;
    line-height: $input-height;
    outline: none;
    padding: 0 15px;
    transition: $border-transition-base;
    width: 100%;

    &::placeholder {
      color: $input-placeholder-color;
    }
    &:hover {
      border-color: $input-hover-border;
    }

    &:focus {
      outline: none;
      border-color: $input-focus-border;
    }
  }

  @include e(suffix) {
    position: absolute;
    height: 100%;
    right: 5px;
    text-align: center;
    color: $input-icon-color;
    transition: all 0.3s;
    pointer-events: none;
  }
  @include e(suffix-inner) {
    pointer-events: all;
  }
  @include e(prefix) {
    position: absolute;
    height: 100%;
    left: 5px;
    top: 0;
    text-align: center;
    color: $input-icon-color;
    transition: all 0.3s;
  }
  @include e(icon) {
    height: 100%;
    width: 25px;
    text-align: center;
    transition: all 0.3s;
    line-height: $input-height;
  }

  @include e(validateIcon) {
    pointer-events: none;
  }

  @include when(active) {
    .rol-input__inner {
      outline: none;
      border-color: $input-focus-border;
    }
  }

  @include when(disabled) {
    .rol-input__inner {
      background-color: $input-disabled-fill;
      border-color: $input-disabled-border;
      color: $input-disabled-color;
      cursor: not-allowed;
      &::placeholder {
        color: $input-disabled-placeholder-color;
      }
    }
    .rol-input__icon {
      cursor: not-allowed;
    }
  }

  @include when(exceed) {
    .rol-input__inner {
      border-color: $danger;
    }

    .rol-input__suffix {
      .rol-input__count {
        color: $danger;
      }
    }
  }

  @include modify(suffix) {
    .rol-input__inner {
      padding-right: 30px;
    }
  }

  @include modify(prefix) {
    .rol-input__inner {
      padding-left: 30px;
    }
  }

  @include modify(medium) {
    font-size: $input-medium-font-size;

    @include e(inner) {
      height: $input-medium-height;
      line-height: $input-medium-height;
    }

    .rol-input__icon {
      line-height: $input-medium-height;
    }
  }
  @include modify(small) {
    font-size: $input-small-font-size;

    @include e(inner) {
      height: $input-small-height;
      line-height: $input-small-height;
    }

    .rol-input__icon {
      line-height: $input-small-height;
    }
  }
  @include modify(mini) {
    font-size: $input-mini-font-size;

    @include e(inner) {
      height: $input-mini-height;
      line-height: $input-mini-height;
    }

    .rol-input__icon {
      line-height: $input-mini-height;
    }
  }
}

@include bem(input-group) {
  line-height: normal;
  display: inline-table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  > .rol-input__inner {
    vertical-align: middle;
    display: table-cell;
  }

  @include e((append, prepend)) {
    background-color: $background;
    color: $text-light;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: $input-border;
    border-radius: $input-border-radius;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
    &:focus {
      outline: none;
    }

    .rol-select,
    .rol-button {
      display: inline-block;
      margin: -10px -20px;
    }

    button.rol-button,
    div.rol-select .rol-input__inner,
    div.rol-select:hover .rol-input__inner {
      border-color: transparent;
      background-color: transparent;
      color: inherit;
      border-top: 0;
      border-bottom: 0;
    }

    .rol-button,
    .rol-input {
      font-size: inherit;
    }
  }

  @include e(prepend) {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  @include e(append) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  @include modify(prepend) {
    .rol-input__inner {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    .rol-select .rol-input.is-focus .rol-input__inner {
      border-color: transparent;
    }
  }

  @include modify(append) {
    .rol-input__inner {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    .rol-select .rol-input.is-focus .rol-input__inner {
      border-color: transparent;
    }
  }
}

.rol-input__inner::-ms-clear {
    display: none;
    width: 0;
    height: 0;
  }


$tag-background-color: $background !default;
$tag-color: $text !default;
$tag-radius: $radius !default;
$tag-delete-margin: 1px !default;

$tag-colors: $colors !default;

@include bem(tags) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  .rol-tag {
    margin-bottom: 0.5rem;
    &:not(:last-child) {
      @include ltr-property('margin', 0.5rem);
    }
  }
  &:last-child {
    margin-bottom: -0.5rem;
  }
  &:not(:last-child) {
    margin-bottom: 1rem;
  }

  &.are-small {
    .rol-tag:not(.is-large):not(.is-medium) {
      font-size: $size-mini;
    }
  }

  &.are-medium {
    .rol-tag:not(.is-large):not(.is-small) {
      font-size: $size-normal;
    }
  }

  &.are-large {
    .rol-tag:not(.is-medium):not(.is-small) {
      font-size: $size-medium;
    }
  }
  &.is-centered {
    justify-content: center;
    .rol-tag {
      margin-right: 0.25rem;
      margin-left: 0.25rem;
    }
  }
  &.is-right {
    justify-content: flex-end;
    .rol-tag {
      &:not(:first-child) {
        margin-left: 0.5rem;
      }
      &:not(:last-child) {
        margin-right: 0;
      }
    }
  }
  &.has-addons {
    .rol-tag {
      @include ltr-property('margin', 0);
      &:not(:first-child) {
        @include ltr-property('margin', 0, false);
        @include ltr {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
        @include rtl {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
      }
      &:not(:last-child) {
        @include ltr {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }

        @include rtl {
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
      }
    }
  }
}

.rol-tag:not(body) {
  align-items: center;
  background-color: $tag-background-color;
  border-radius: $tag-radius;
  color: $tag-color;
  display: inline-flex;
  font-size: $size-small;
  height: 2em;
  justify-content: center;
  line-height: 1.5;
  padding-left: 0.75em;
  padding-right: 0.75em;
  white-space: nowrap;
  .delete {
    @extend %delete;
    @include ltr-property('margin', 0.25rem, false);
    @include ltr-property('margin', -0.375rem);
  }
  @each $name, $pair in $tag-colors {
    $color: nth($pair, 1);
    $color-invert: nth($pair, 2);
    &.is-#{$name} {
      background-color: $color;
      color: $color-invert;
      // If a light and dark colors are provided
      @if length($pair) > 3 {
        $color-light: nth($pair, 3);
        $color-dark: nth($pair, 4);
        &.is-light {
          background-color: $color-light;
          color: $color-dark;
        }
      }
    }
  }

  &.is-small {
    font-size: $size-mini;
  }
  &.is-normal {
    font-size: $size-small;
  }
  &.is-medium {
    font-size: $size-normal;
  }
  &.is-large {
    font-size: $size-medium;
  }

  .rol-icon {
    &:first-child:not(:last-child) {
      @include ltr-property('margin', -0.375em, false);
      @include ltr-property('margin', 0.1875em);
    }
    &:last-child:not(:first-child) {
      @include ltr-property('margin', 0.1875em, false);
      @include ltr-property('margin', -0.375em);
    }

    &:first-child:last-child {
      @include ltr-property('margin', -0.375em, false);
      @include ltr-property('margin', -0.375em);
    }
  }

  &.is-delete {
    @include ltr-property('margin', $tag-delete-margin, false);
    padding: 0;
    position: relative;
    width: 2em;
    &::before,
    &::after {
      background-color: currentColor;
      content: '';
      display: block;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
      transform-origin: center center;
    }
    &::before {
      height: 1px;
      width: 50%;
    }

    &::after {
      height: 50%;
      width: 1px;
    }
    &:hover,
    &:focus {
      background-color: darken($tag-background-color, 5%);
    }
    &:active {
      background-color: darken($tag-background-color, 10%);
    }
  }
  &.is-rounded {
    border-radius: $radius-rounded;
  }
}

a.rol-tag {
  &:hover {
    text-decoration: underline;
  }
}

$select-border-color-hover: $border-hover !default;
$select-disabled-border: $border-light !default;
//fontSize||Font|1
$select-font-size: $font-size-base !default;
$select-close-hover-color: $grey !default;
$select-input-color: $grey-light !default;
$select-multiple-input-color: #666 !default;
// color||Color|0
$select-input-focus-border-color: $link !default;
// fontSize||Font|1
$select-input-font-size: 14px !default;
$select-option-color: $text !default;
$select-option-disabled-color: $grey-light !default;
$select-option-disabled-background: $white !default;
// height||Other|4
$select-option-height: 34px !default;
$select-option-hover-background: $background !default;
// color||Color|0
$select-option-selected-font-color: $link !default;
$select-option-selected-hover: $background !default;
$select-dropdown-background: $white !default;
$select-dropdown-shadow: $box-shadow-light !default;
$select-dropdown-empty-color: #999 !default;
/// height||Other|4
$select-dropdown-max-height: 274px !default;
$select-dropdown-padding: 6px 0 !default;
$select-dropdown-empty-padding: 10px 0 !default;
$select-dropdown-border: solid 1px $border-light !default;

$select-group-color: $text-light !default;
$select-group-height: 30px !default;
$select-group-font-size: 12px !default;

@include bem(select-dropdown) {
  z-index: #{$index-top + 1};
  border: $select-dropdown-border;
  border-radius: $radius;
  background-color: $select-dropdown-background;
  box-shadow: $select-dropdown-shadow;
  box-sizing: border-box;

  @include when(multiple) {
    & .rol-select-dropdown__item.selected {
      color: $select-option-selected-font-color;
      background-color: $select-dropdown-background;

      &.hover {
        background-color: $select-option-hover-background;
      }
    }
  }

  .rol-scrollbar.is-empty .rol-select-dropdown__list {
    padding: 0;
  }

  @include e(item) {
    font-size: $select-font-size;
    padding: 0 20px;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: $select-option-color;
    height: $select-option-height;
    line-height: $select-option-height;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    @include when(disabled) {
      color: $select-option-disabled-color;
      cursor: not-allowed;

      &:hover {
        background-color: $white;
      }
    }

    &.hover,
    &:hover {
      background-color: $select-option-hover-background;
    }

    &.selected {
      color: $select-option-selected-font-color;
      font-weight: bold;
    }
    & .rol-icon {
      position: absolute;
      right: 20px;
      font-size: 12px;
      font-weight: bold;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
  }
}

@include bem(select-dropdown__empty) {
  padding: $select-dropdown-empty-padding;
  margin: 0;
  text-align: center;
  color: $select-dropdown-empty-color;
  font-size: $select-font-size;
}

@include bem(select-dropdown__wrap) {
  max-height: $select-dropdown-max-height;
}

@include bem(select-dropdown__list) {
  list-style: none;
  padding: $select-dropdown-padding;
  margin: 0;
  box-sizing: border-box;
}

@include bem(select-popper) {
  &.rol-popper[data-popper-placement^='bottom'] {
    margin-top: 8px !important;
  }
  &.rol-popper[data-popper-placement^='top'] {
    margin-bottom: 8px !important;
  }
  & .rol-popper__arrow {
    z-index: #{$index-top + 2};
  }
  &.rol-popper.is-light[data-popper-placement^='bottom'] .rol-popper__arrow::before {
    border-top: solid 1px #ededed;
    border-left: solid 1px #ededed;
  }
}

@include bem(select) {
  display: inline-block;
  position: relative;

  // .rol-select__tags {
  //   > span {
  //     display: block;
  //   }
  // }
  &:hover {
    .rol-input__inner {
      border-color: $select-border-color-hover;
    }
  }

  .rol-input__inner {
    cursor: pointer;
    padding-right: 35px;

    &:focus {
      border-color: $select-input-focus-border-color;
    }
  }

  .rol-input {
    & .rol-select__caret {
      color: $select-input-color;
      font-size: $select-input-font-size;
      transition: transform 0.3s;
      transform: rotateZ(180deg);
      cursor: pointer;
      @include when(reverse) {
        transform: rotateZ(0deg);
      }
      @include when(show-close) {
        font-size: $select-font-size;
        text-align: center;
        transform: rotateZ(180deg);
        border-radius: $radius-rounded;
        color: $select-input-color;
        transition: $color-transition-base;

        &:hover {
          color: $select-close-hover-color;
        }
      }
    }

    // & .rol-input__suffix-inner {
    
    // }

    &.is-disabled {
      & .rol-input__inner {
        cursor: not-allowed;

        &:hover {
          border-color: $select-disabled-border;
        }
      }
    }

    &.is-focus .rol-input__inner {
      border-color: $select-input-focus-border-color;
    }
  }

  > .rol-input {
    display: block;
  }

  @include e(input) {
    border: none;
    outline: none;
    padding: 0;
    margin-left: 15px;
    color: $select-multiple-input-color;
    font-size: $select-font-size;
    appearance: none;
    height: 28px;
    background-color: transparent;
    @include when(mini) {
      height: 14px;
    }
  }
  
  @include e(close) {
    cursor: pointer;
    position: absolute;
    top: 8px;
    z-index: $index-top;
    right: 25px;
    color: $select-input-color;
    line-height: 18px;
    font-size: $select-input-font-size;
  
    &:hover {
      color: $select-close-hover-color;
    }
  }
  
  @include e(tags) {
    position: absolute;
    line-height: normal;
    white-space: normal;
    z-index: $index-normal;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .rol-tag__close {
    margin-top: -2px;
  }

  .rol-tag {
    box-sizing: border-box;
    border-color: transparent;
    margin: 2px 0 2px 6px;
    background-color: #f0f2f5;

    &__close.rol-icon-close {
      background-color: $text-light;
      right: -7px;
      top: 0;
      color: $white;

      &:hover {
        background-color: $text-light;
      }

      &::before {
        display: block;
        transform: translate(0, .5px);
      }
    }
  }
}



@include bem(select-group) {
  $gap: 20px;

  margin: 0;
  padding: 0;

  @include e(wrap) {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    &:not(:last-of-type) {
      padding-bottom: 24px;

      &::after {
        content: '';
        position: absolute;
        display: block;
        left: $gap;
        right: $gap;
        bottom: 12px;
        height: 1px;
        background: $border-light;
      }
    }
  }

  @include e(title) {
    padding-left: $gap;
    font-size: $select-group-font-size;
    color: $select-group-color;
    line-height: $select-group-height;
  }

  & .rol-select-dropdown__item {
    padding-left: $gap;
  }
}


$pagination-font-color: $text-strong !default;
$pagination-background-color: $white !default;
$pagination-font-size: 13px !default;
$pagination-border-radius: 3px !default;
$pagination-button-color: $text !default;
$pagination-button-width: 35.5px !default;
$pagination-button-height: 28px !default;
$pagination-button-disabled-color: Lighten($text-light,10%) !default;
$pagination-button-disabled-background-color: $white!default;
$pagination-hover-color: $link !default;

@include bem(pagination) {
  white-space: nowrap;
  padding: 2px 5px;
  color: $pagination-font-color;
  font-weight: bold;
  @include clearfix;

  span:not([class*='suffix']):not(.rol-icon),
  button {
    display: inline-block;
    font-size: $pagination-font-size;
    min-width: $pagination-button-width;
    height: $pagination-button-height;
    line-height: $pagination-button-height;
    vertical-align: top;
    box-sizing: border-box;
  }

  button {
    border: none;
    padding: 0 6px;
    background: transparent;

    &:focus {
      outline: none;
    }

    &:hover {
      color: $pagination-hover-color;
    }

    &:disabled {
      color: $pagination-button-disabled-color;
      background-color: $pagination-button-disabled-background-color;
      cursor: not-allowed;
    }
  }
  .rol-input__inner {
    text-align: center;
    -moz-appearance: textfield;
    line-height: normal;
  }

  .rol-input__suffix {
    right: 0;
    transform: scale(0.8);
  }
  .rol-select .rol-input {
    width: 100px;
    margin: 0 5px;

    .rol-input__inner {
      padding-right: 25px;
      border-radius: $pagination-border-radius;
    }
  }

  .btn-prev,
  .btn-next {
    background: center center no-repeat;
    background-size: 16px;
    background-color: $pagination-background-color;
    cursor: pointer;
    margin: 0;
    color: $pagination-button-color;
    .rol-icon {
      display: block;
      font-size: 12px;
      font-weight: bold;
    }
  }
  .btn-prev {
    padding-right: 12px;
  }

  .btn-next {
    padding-left: 12px;
  }
  .rol-pager li.disabled {
    color: $grey-lighter;
    cursor: not-allowed;
  }

  @include modify(small) {
    .btn-prev,
    .btn-next,
    .rol-pager li,
    .rol-pager li.btn-quicknext,
    .rol-pager li.btn-quickprev,
    .rol-pager li:last-child {
      border-color: transparent;
      font-size: 12px;
      line-height: 22px;
      height: 22px;
      min-width: 22px;
    }

    .arrow.disabled {
      visibility: hidden;
    }

    .more::before,
    li.more::before {
      line-height: 24px;
    }

    span:not([class*='suffix']),
    button {
      height: 22px;
      line-height: 22px;
    }

    @include e(editor) {
      height: 22px;
      &.rol-input .rol-input__inner {
        height: 22px;
      }
    }
  }

  @include e(sizes) {
    margin: 0 10px 0 0;
    font-weight: normal;
    color: $text-light;

    .rol-input .rol-input__inner {
      font-size: $pagination-font-size;
      padding-left: 8px;

      &:hover {
        border-color: $pagination-hover-color;
      }
    }
  }

  @include e(total) {
    margin-right: 10px;
    font-weight: normal;
    color: $text-light;
  }

  @include e(jump) {
    margin-left: 24px;
    font-weight: normal;
    color: $text-light;

    .rol-input__inner {
      padding: 0 3px;
    }
  }

  @include e(rightwrapper) {
    float: right;
  }

  @include e(editor) {
    line-height: 18px;
    padding: 0 2px;
    height: $pagination-button-height;
    text-align: center;
    margin: 0 2px;
    box-sizing: border-box;
    border-radius: $pagination-border-radius;

    &.rol-input {
      width: 50px;
    }

    &.rol-input .rol-input__inner {
      height: $pagination-button-height;
    }

    .rol-input__inner::-webkit-inner-spin-button,
    .rol-input__inner::-webkit-outer-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }

  @include when(background) {
    .btn-prev,
    .btn-next,
    .rol-pager li {
      margin: 0 5px;
      background-color: $light;
      color: $text-light;
      min-width: 30px;
      border-radius: 2px;

      &.disabled {
        color: $grey-lighter;
      }
    }

    .btn-prev,
    .btn-next {
      padding: 0;

      &:disabled {
        color: $grey-lighter;
      }
    }
    .rol-pager li:not(.disabled) {
      &:hover {
        color: $pagination-hover-color;
      }

      &.active {
        background-color: $link;
        color: $white;
      }
    }

    &.rol-pagination--small {
      .btn-prev,
      .btn-next,
      .rol-pager li {
        margin: 0 3px;
        min-width: 22px;
      }
    }
  }
}

@include bem(pager) {
  user-select: none;
  list-style: none;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  padding: 0;
  margin: 0;

  .more::before {
    line-height: 30px;
  }

  li {
    padding: 0 4px;
    background: $pagination-background-color;
    vertical-align: top;
    display: inline-block;
    font-size: $pagination-font-size;
    min-width: $pagination-button-width;
    height: $pagination-button-height;
    line-height: $pagination-button-height;
    cursor: pointer;
    box-sizing: border-box;
    text-align: center;
    margin: 0;

    &.btn-quicknext,
    &.btn-quickprev {
      line-height: 28px;
      height: 28px;
      color: $pagination-button-color;

      &.disabled {
        color: $grey-lighter;
      }
      .rol-icon {
        display: block;
      }
    }

    &.btn-quickprev:hover {
      cursor: pointer;
    }

    &.btn-quicknext:hover {
      cursor: pointer;
    }

    &.active + li {
      border-left: 0;
    }

    &:hover {
      color: $pagination-hover-color;
    }

    &.active {
      color: $pagination-hover-color;
      cursor: default;
    }
  }
}

$menu-background-color: $white;

$menu-item-font-size: 14px !default;
$menu-item-color: $text !default;
$menu-item-radius: $radius-small !default;
$menu-item-hover-color: $text-strong !default;
$menu-item-hover-background-color: $link-light !default;
$menu-item-active-color: $link-invert !default;
$menu-item-active-background-color: $link !default;

$menu-list-border-right: 1px solid $border !default;

$menu-label-color: $text-light !default;
$menu-label-font-size: 0.75em !default;
$menu-label-letter-spacing: 0.1em !default;
$menu-label-spacing: 1em !default;

@include bem(menu) {
  border-right: $menu-list-border-right;
  list-style: none;
  position: relative;
  margin: 0;
  padding-left: 0;
  background-color: $menu-background-color;
  @include clearfix;

  @include modify(collapse) {
    width: 64px;

    > .rol-menu-item,
    > .rol-submenu > .rol-submenu__title {
      [class^='rol-icon']:not(.fa-angle-down) {
        margin: 0;
        vertical-align: middle;
        width: 24px;
        text-align: center;
      }
      .rol-submenu__icon-arrow {
        display: none;
      }
      span {
        height: 0;
        width: 0;
        overflow: hidden;
        visibility: hidden;
        display: inline-block;
      }
    }
    > .rol-menu-item.is-active i {
      color: inherit;
    }

    .rol-menu .rol-submenu {
      min-width: 200px;
    }

    .rol-submenu {
      position: relative;
      & .rol-menu {
        position: absolute;
        margin-left: 5px;
        top: 0;
        left: 100%;
        z-index: 10;
        border: 1px solid $border-light;
        border-radius: $radius-small;
        box-shadow: $box-shadow-light;
      }
      &.is-opened {
        > .rol-submenu__title .rol-submenu__icon-arrow {
          transform: none;
        }
      }
    }
  }
  @include modify(popup) {
    z-index: 100;
    min-width: 200px;
    border: none;
    padding: 5px 0;
    border-radius: 4px;
    box-shadow: $box-shadow-light;
    &-right-start {
      margin-left: 5px;
      margin-right: 5px;
    }
  }
}

@mixin menu-item {
  height: 56px;
  line-height: 56px;
  font-size: $menu-item-font-size;
  color: $menu-item-color;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  position: relative;
  transition: border-color 0.3s, background-color 0.3s, color 0.3s;
  box-sizing: border-box;
  white-space: nowrap;

  * {
    vertical-align: middle;
  }

  i {
    color: $text-light;
  }

  &:hover,
  &:focus {
    outline: none;
    color: $menu-item-hover-color;
    background-color: $menu-item-hover-background-color;
  }

  @include when(disabled) {
    opacity: 0.25;
    cursor: not-allowed;
    background: none !important;
  }
}

@include bem(menu-item) {
  @include menu-item();

  & [class^='rol-icon'] {
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    vertical-align: middle;
  }
  @include when(active) {
    color: $menu-item-active-color;
    background-color: $menu-item-active-background-color;
    i {
      color: inherit;
    }
  }
  @include e(tooltip-content) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: inline-block;
    box-sizing: border-box;
    padding: 0 20px;
  }
}

@include bem(submenu) {
  list-style: none;
  margin: 0;
  padding-left: 0;

  @include e(title) {
    @include menu-item;
    &:hover {
      background-color: $menu-item-hover-background-color;
    }
  }
  & .rol-menu {
    border: none;
  }
  & .rol-menu-item {
    height: 50px;
    line-height: 50px;
    padding: 0 45px;
    min-width: 200px;
  }
  @include e(icon-arrow) {
    position: absolute;
    right: 20px;
    // transition: transform 0.3s;
    font-size: 12px;
  }
  @include when(active) {
    .rol-submenu__title {
      border-bottom-color: $link;
    }
  }
  @include when(opened) {
    > .rol-submenu__title .rol-submenu__icon-arrow {
      .rol-icon {
        transform: rotate(180deg);
      }
    }
  }
  @include when(disabled) {
    .rol-submenu__title,
    .rol-menu-item {
      opacity: 0.25;
      cursor: not-allowed;
      background: none !important;
    }
  }
  [class^='rol-icon'] {
    vertical-align: middle;
    margin-right: 5px;
    width: 24px;
    text-align: center;
    font-size: 18px;
    transition: transform 0.3s;
  }
}

@include bem(menu-item-group) {
  > ul {
    padding: 0;
  }
  @include e(title) {
    padding: 7px 0 7px 20px;
    line-height: normal;
    font-size: 12px;
    color: $text-light;
  }
}

.horizontal-collapse-transition .rol-submenu__title .rol-submenu__icon-arrow {
  transition: 0.2s;
  opacity: 0;
}

@include bem(progress) {
  position: relative;
  line-height: 1;

  @include e(text) {
    font-size: 14px;
    color: $text;
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    line-height: 1;

    i {
      vertical-align: middle;
      display: inline-block;
    }
  }

  @include modify((circle, dashboard)) {
    display: inline-block;

    .rol-progress__text {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      text-align: center;
      margin: 0;
      transform: translate(0, -50%);

      i {
        vertical-align: middle;
        display: inline-block;
      }
    }
  }
  @include modify(without-text) {
    .rol-progress__text {
      display: none;
    }

    .rol-progress-bar {
      padding-right: 0;
      margin-right: 0;
      display: block;
    }
  }
  @include modify(text-inside) {
    .rol-progress-bar {
      padding-right: 0;
      margin-right: 0;
    }
  }

  @include when(success) {
    .rol-progress-bar__inner {
      background-color: $success;
    }

    .rol-progress__text {
      color: $success;
    }
  }

  @include when(warning) {
    .rol-progress-bar__inner {
      background-color: $warning;
    }

    .rol-progress__text {
      color: $warning;
    }
  }

  @include when(warning) {
    .rol-progress-bar__inner {
      background-color: $warning;
    }

    .rol-progress__text {
      color: $warning;
    }
  }

  @include when(exception) {
    .rol-progress-bar__inner {
      background-color: $danger;
    }

    .rol-progress__text {
      color: $danger;
    }
  }
}

@include bem(progress-bar) {
  padding-right: 50px;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  margin-right: -55px;
  box-sizing: border-box;

  @include e(outer) {
    height: 6px;
    border-radius: 100px;
    background-color: $border-light;
    overflow: hidden;
    position: relative;
    vertical-align: middle;
  }
  @include e(inner) {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-color: $link;
    text-align: right;
    border-radius: 100px;
    line-height: 1;
    white-space: nowrap;
    transition: width 0.6s ease;
    @include vertical-center;
  }
  @include e(innerText) {
    display: inline-block;
    vertical-align: middle;
    color: $white;
    font-size: 12px;
    margin: 0 5px;
  }
}

@keyframes progress {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 32px 0;
  }
}

@include bem(upload) {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  outline: none;
  @include e(input) {
    display: none;
  }

  @include e(tip) {
    font-size: 12px;
    color: $text;
    margin-top: 7px;
  }

  @include modify(picture-card) {
    background-color: $background;
    border: 1px dashed $border;
    border-radius: 6px;
    box-sizing: border-box;
    width: 148px;
    height: 148px;
    cursor: pointer;
    line-height: 146px;
    vertical-align: top;

    i {
      color: $text-strong;
      font-size: 28px;
    }
    &:hover {
      border-color: $link;
      color: $link;

      .rol-upload-dragger {
        border-color: $link;
      }
    }
  }
}

@include bem(upload-dragger) {
  background-color: $background;
  border: 1px dashed $border;
  border-radius: 6px;
  box-sizing: border-box;
  width: 360px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  .rol-icon-upload {
    font-size: 67px;
    color: $text-light;
    margin: 40px 0 16px;
    line-height: 50px;
  }
  + .rol-upload__tip {
    text-align: center;
  }
  ~ .rol-upload__files {
    border-top: $border;
    margin-top: 7px;
    padding-top: 5px;
  }

  .rol-upload__text {
    color: $text;
    font-size: 14px;
    text-align: center;

    em {
      color: $link;
      font-style: normal;
    }
  }
  &:hover {
    border-color: $link;
  }
  @include when(dragover) {
    background-color: $link-light;
    border: 2px dashed $link;
  }
}
@include bem(upload-list) {
  ul,
  li {
    &:focus {
      outline: none;
    }
  }
  margin: 0;
  padding: 0;
  list-style: none;
  @include e(item) {
    transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
    font-size: 14px;
    color: $text;
    line-height: 1.8;
    margin-top: 5px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
    .rol-progress {
      position: absolute;
      top: 20px;
      width: 100%;
    }
    .rol-progress__text {
      position: absolute;
      right: 0;
      top: -13px;
    }
    .rol-progress-bar {
      margin-right: 0;
      padding-right: 0;
    }

    &:first-child {
      margin-top: 10px;
    }

    & .rol-icon-upload-success {
      color: $green;
      & .rol-icon {
        display: inline-block;
      }
    }

    & .rol-icon-upload-fail {
      color: $danger;
      & .rol-icon {
        display: inline-block;
      }
    }

    .rol-icon-close {
      display: none;
      position: absolute;
      top: 0px;
      right: 5px;
      cursor: pointer;
      opacity: 0.75;
      color: $text;

      &:hover {
        opacity: 1;
      }

      .rol-icon {
        display: inline;
      }
    }
    & .rol-icon-close-tip {
      display: none;
      position: absolute;
      top: 0;
      right: 5px;
      font-size: 12px;
      cursor: pointer;
      opacity: 1;
      color: $link;
      height: 100%;
      @include vertical-center;
    }

    &:hover {
      background-color: $background;

      .rol-icon-close {
        display: inline-block;
      }

      .rol-progress__text {
        display: none;
      }
    }

    @include when(success) {
      .rol-upload-list__item-status-label {
        display: block;
      }

      .rol-upload-list__item-name:hover,
      .rol-upload-list__item-name:focus {
        color: $info;
        cursor: pointer;
      }
      &:focus:not(:hover) {
        /* 键盘focus */
        .rol-icon-close-tip {
          display: inline-block;
        }
      }

      &:not(.focusing):focus,
      &:active {
        /* click时 */
        outline-width: 0;
        .rol-icon-close-tip {
          display: none;
        }
      }
      &:hover,
      &:focus {
        .rol-upload-list__item-status-label {
          display: none;
        }
      }
    }
    @include when(fail) {
      .rol-upload-list__item-status-label {
        display: block;
      }

      .rol-upload-list__item-name:hover,
      .rol-upload-list__item-name:focus {
        color: $info;
        cursor: pointer;
      }
      &:focus:not(:hover) {
        /* 键盘focus */
        .rol-icon-close-tip {
          display: inline-block;
        }
      }

      &:not(.focusing):focus,
      &:active {
        /* click时 */
        outline-width: 0;
        .rol-icon-close-tip {
          display: none;
        }
      }
      &:hover,
      &:focus {
        .rol-upload-list__item-status-label {
          display: none;
        }
      }
    }
  }
  @include when(disabled) {
    .rol-upload-list__item:hover .rol-upload-list__item-status-label {
      display: block;
    }
  }

  @include e(item-name) {
    color: $text;
    display: block;
    margin-right: 40px;
    overflow: hidden;
    padding-left: 4px;
    text-overflow: ellipsis;
    transition: color 0.3s;
    white-space: nowrap;

    @include e(icon-container) {
      .rol-icon {
        display: inline;
      }
    }

    [class^='rol-icon'] {
      height: 100%;
      margin-right: 7px;
      color: $text-light;
      line-height: inherit;
    }
  }
  @include e(item-status-label) {
    position: absolute;
    right: 5px;
    top: 0;
    line-height: inherit;
    display: none;
  }
  @include e(item-delete) {
    position: absolute;
    right: 10px;
    top: 0;
    font-size: 12px;
    color: $text;
    display: none;

    &:hover {
      color: $link;
    }
  }
  @include modify(picture-card) {
    margin: 0;
    display: inline;
    vertical-align: top;
    .rol-upload-list__item {
      overflow: hidden;
      background-color: $white;
      border: 1px solid $grey-light;
      border-radius: 6px;
      box-sizing: border-box;
      width: 148px;
      height: 148px;
      margin: 0 8px 8px 0;
      display: inline-block;
      .rol-icon-check,
      .rol-icon-circle-check {
        color: $white;
      }
      .rol-icon-close {
        display: none;
      }
      &:hover {
        .rol-upload-list__item-status-label {
          display: none;
        }

        .rol-progress__text {
          display: block;
        }
      }
    }
    .rol-upload-list__item-name {
      display: none;
    }

    .rol-upload-list__item-thumbnail {
      width: 100%;
      height: 100%;
    }

    .rol-upload-list__item-status-label {
      position: absolute;
      right: -15px;
      top: -6px;
      width: 40px;
      height: 24px;

      text-align: center;
      transform: rotate(45deg);
      box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);

      i {
        font-size: 12px;
        margin-top: 11px;
        transform: rotate(-45deg) translate(3px, -2px);
        color: $white;
      }
    }

    .rol-upload-list__item.is-success .rol-upload-list__item-status-label {
      background: $green;
    }

    .rol-upload-list__item.is-fail .rol-upload-list__item-status-label {
      background: $danger;
    }

    .rol-upload-list__item-actions {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      &::after {
        display: inline-block;
        content: '';
        height: 100%;
        vertical-align: middle;
      }

      span {
        display: none;
        cursor: pointer;
      }

      span + span {
        margin-left: 15px;
      }

      .rol-upload-list__item-delete {
        position: static;
        font-size: inherit;
        color: inherit;
      }

      &:hover {
        opacity: 1;
        span {
          display: inline-block;
        }
      }
    }
    .rol-progress {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      bottom: auto;
      width: 126px;

      .rol-progress__text {
        top: 50%;
      }
    }
  }
  @include modify(picture) {
    .rol-upload-list__item {
      overflow: hidden;
      z-index: 0;
      background-color: $white;
      border: 1px solid $grey-light;
      border-radius: 6px;
      box-sizing: border-box;
      margin-top: 10px;
      padding: 10px 10px 10px 90px;
      height: 92px;
      .rol-icon-check,
      .rol-icon-circle-check {
        color: $white;
      }

      &:hover {
        .rol-upload-list__item-status-label {
          background: transparent;
          box-shadow: none;
          top: -2px;
          right: -12px;
        }

        .rol-progress__text {
          display: block;
        }
      }

      &.is-success,
      &.is-fail {
        .rol-upload-list__item-name {
          line-height: 70px;
          margin-top: 0;
          i {
            display: none;
          }
        }
      }
    }
    .rol-upload-list__item-thumbnail {
      vertical-align: middle;
      display: inline-block;
      width: 70px;
      height: 70px;
      position: relative;
      z-index: 1;
      margin-left: -80px;
      background-color: $white;
      float: left;
    }

    .rol-upload-list__item-name {
      display: block;
      margin-top: 20px;

      i {
        font-size: 70px;
        line-height: 1;
        position: absolute;
        left: 9px;
        top: 10px;
      }
    }

    .rol-upload-list__item-status-label {
      position: absolute;
      right: -17px;
      top: -7px;
      width: 46px;
      height: 26px;
      text-align: center;
      transform: rotate(45deg);
      box-shadow: 0 1px 1px #ccc;

      i {
        font-size: 12px;
        margin-top: 11px;
        transform: rotate(-45deg) translate(3px, -2px);
        color: $white;
      }
    }

    .rol-upload-list__item.is-success .rol-upload-list__item-status-label {
      background: $green;
    }

    .rol-upload-list__item.is-fail .rol-upload-list__item-status-label {
      background: $danger;
    }

    .rol-upload-list__item .rol-icon-close-tip {
      height: auto;
    }

    .rol-progress {
      position: relative;
      top: -7px;
    }
  }
}
@include bem(upload-cover) {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  cursor: default;
  @include vertical-center;

  img {
    display: block;
    width: 100%;
    height: 100%;
  }

  @include e(label) {
    position: absolute;
    right: -15px;
    top: -6px;
    width: 40px;
    height: 24px;
    background: #13ce66;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);

    i {
      font-size: 12px;
      margin-top: 11px;
      transform: rotate(-45deg);
      color: #fff;
    }
  }

  @include e(progress) {
    display: inline-block;
    vertical-align: middle;
    position: static;
    width: 243px;

    + .rol-upload__inner {
      opacity: 0;
    }
  }

  @include e(content) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @include e(interact) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(#000, 0.72);
    text-align: center;

    .btn {
      display: inline-block;
      color: $white;
      font-size: 14px;
      cursor: pointer;
      vertical-align: middle;
      transition: $md-fade-transition;
      margin-top: 60px;

      i {
        margin-top: 0;
      }

      span {
        opacity: 0;
        transition: opacity 0.15s linear;
      }

      &:not(:first-child) {
        margin-left: 35px;
      }

      &:hover {
        transform: translateY(-13px);

        span {
          opacity: 1;
        }
      }
      i {
        color: $white;
        display: block;
        font-size: 24px;
        line-height: inherit;
        margin: 0 auto 5px;
      }
    }
  }

  @include e(title) {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: $white;
    height: 36px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: normal;
    text-align: left;
    padding: 0 10px;
    margin: 0;
    line-height: 36px;
    font-size: 14px;
    color: $text;
  }

  + .rol-upload__inner {
    opacity: 0;
    position: relative;
    z-index: 1;
  }
}


$switch-on-color: $link !default;
$switch-off-color: $border !default;
$switch-font-size: 14px !default;
$switch-core-border-radius: 10px !default;
$switch-width: 40px !default;
$switch-height: 20px !default;
$switch-button-size: 16px !default;

@include bem(switch) {
  display: inline-flex;
  align-items: center;
  position: relative;
  line-height: $switch-height;
  height: $switch-height;
  vertical-align: middle;
  @include when(disabled) {
    & .rol-switch__core,
    & .rol-switch__label {
      cursor: not-allowed;
    }
  }

  @include e(label) {
    transition: 0.2s;
    height: $switch-height;
    display: inline-block;
    font-size: $switch-font-size;
    font-weight: 500;
    cursor: pointer;
    vertical-align: middle;
    color: $text;
    @include when(active) {
      color: $link;
    }
    @include modify(left) {
      margin-right: 10px;
    }
    @include modify(right) {
      margin-left: 10px;
    }
    & * {
      line-height: 1;
      font-size: $switch-font-size;
      display: inline-block;
    }
  }
  @include e(input) {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    margin: 0;
  }

  @include e(core) {
    margin: 0;
    display: inline-block;
    position: relative;
    width: $switch-width;
    height: $switch-height;
    border: 1px solid $switch-off-color;
    background-color: $switch-off-color;
    outline: none;
    border-radius: $switch-core-border-radius;
    box-sizing: border-box;
    cursor: pointer;
    transition: border-color 0.3s, background-color 0.3s;
    vertical-align: middle;

    .rol-switch__action {
      position: absolute;
      top: 1px;
      left: 1px;
      border-radius: 100%;
      transition: all 0.3s;
      width: $switch-button-size;
      height: $switch-button-size;
      background-color: $white;
      display: flex;
      justify-content: center;
      align-items: center;
      color: $switch-off-color;
    }
  }
  @include when(checked) {
    .rol-switch__core {
      border-color: $switch-on-color;
      background-color: $switch-on-color;

      .rol-switch__action {
        left: 100%;
        margin-left: -$switch-button-size - 1px;
        color: $switch-on-color;
      }
    }
  }
  @include when(disabled) {
    opacity: 0.6;
  }
  @include modify(wide) {
    .rol-switch__label {
      &.rol-switch__label--left {
        span {
          left: 10px;
        }
      }
      &.rol-switch__label--right {
        span {
          right: 10px;
        }
      }
    }
  }
  & .label-fade-enter-active,
  & .label-fade-leave-active {
    opacity: 0;
  }
}

$badge-background-color: $danger !default;
$badge-radius: 10px !default;
$badge-font-size: 12px !default;
$badge-padding: 6px !default;
$badge-size: 18px !default;
$badg-colors: $colors;
@include bem(badge) {
  position: relative;
  vertical-align: middle;
  display: inline-block;
  @include e(content) {
    background-color: $badge-background-color;
    color: $white;
    border-radius: $badge-radius;
    display: inline-block;
    font-size: $badge-font-size;
    height: $badge-size;
    line-height: $badge-size;
    padding: 0 $badge-padding;
    text-align: center;
    white-space: nowrap;
    border: 1px solid $white;

    @include when(fixed) {
      position: absolute;
      top: 0;
      right: #{1 + $badge-size / 2};
      transform: translateY(-50%) translateX(100%);
      @include when(dot) {
        right: 5px;
      }
    }
    @include when(dot) {
      height: 8px;
      width: 8px;
      padding: 0;
      right: 0;
      border-radius: 50%;
    }

    @each $name, $pair in $alert-colors {
      $color: nth($pair, 1);
      $color-invert: nth($pair, 2);
      @include modify(#{$name}) {
        background-color: $color;
        color: $color-invert;
      }
    }
  }
}

$avatar-font-color: $white !default;
$avatar-background-color: $grey-light !default;
$avatar-text-font-size: 14px !default;
$avatar-icon-font-size: 18px !default;
$avatar-border-radius: 4px !default;
$avatar-large-size: 40px !default;
$avatar-medium-size: 36px !default;
$avatar-small-size: 28px !default;

@include bem(avatar) {
  display: inline-block;
  box-sizing: border-box;
  text-align: center;
  overflow: hidden;
  color: $avatar-font-color;
  background: $avatar-background-color;
  width: $avatar-large-size;
  height: $avatar-large-size;
  line-height: $avatar-large-size;
  font-size: $avatar-text-font-size;

  > img {
    display: block;
    height: 100%;
  }
  @include modify(circle) {
    border-radius: 50%;
  }
  @include modify(square) {
    border-radius: $avatar-border-radius;
  }

  @include modify(icon) {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: $avatar-icon-font-size;
  }

  @include modify(large) {
    width: $avatar-large-size;
    height: $avatar-large-size;
    line-height: $avatar-large-size;
  }

  @include modify(medium) {
    width: $avatar-medium-size;
    height: $avatar-medium-size;
    line-height: $avatar-medium-size;
  }

  @include modify(small) {
    width: $avatar-small-size;
    height: $avatar-small-size;
    line-height: $avatar-small-size;
  }
}

$datepicker-font-color: $text !default;
$datepicker-off-font-color: $text-light !default;
$datepicker-header-font-color: $text !default;
$datepicker-icon-color: $text !default;
$datepicker-border-color: $border-light !default;
$datepicker-inner-border-color: $grey-lighter !default;
$datepicker-inrange-background-color: $background !default;
$datepicker-inrange-hover-background-color: $background !default;
$datepicker-active-color: $link !default;
$datepicker-hover-font-color: $link !default;
$datepicker-cell-hover-color: $white !default;

@include bem(picker) {
  @include e(popper) {
    &[role='tooltip'] {
      padding: 0px;
      box-shadow: $box-shadow-light;
    }
    &.is-light[role='tooltip'] {
      border: solid 1px $datepicker-border-color;

      &[data-popper-placement^='top'] {
        .rol-popper__arrow::before {
          border: solid 1px $datepicker-border-color;
          border-top-color: transparent;
          border-left-color: transparent;
        }
      }
      &[data-popper-placement^='bottom'] {
        .rol-popper__arrow::before {
          border: solid 1px $datepicker-border-color;
          border-bottom-color: transparent;
          border-right-color: transparent;
        }
      }
    }
  }
}

@include bem(date-editor) {
  position: relative;
  display: inline-block;
  text-align: left;

  &.rol-input,
  &.rol-input__inner {
    width: 220px;
  }

  .rol-input__prefix,
  .rol-input__suffix {
    .rol-icon {
      display: block;
    }
  }

  @include modify(monthrange) {
    &.rol-input,
    &.rol-input__inner {
      width: 310px;
    }
  }
  @include modify((daterange, timerange)) {
    &.rol-input,
    &.rol-input__inner {
      width: 350px;
    }
  }
  @include modify(datetimerange) {
    &.rol-input,
    &.rol-input__inner {
      width: 400px;
    }
  }
  @include modify(dates) {
    .rol-input__inner {
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .rol-icon-circle-close {
    cursor: pointer;
  }

  .rol-range__icon {
    font-size: 14px;
    width: 14px;
    margin-left: -5px;
    color: $input-icon-color;
    float: left;
    line-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .rol-range-input {
    appearance: none;
    border: none;
    outline: none;
    display: inline-block;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 41.5%;
    text-align: center;
    font-size: $font-size-base;
    color: $text;

    &::placeholder {
      color: $text-lighter;
    }
  }
  .rol-range-separator {
    display: inline-block;
    height: 100%;
    padding: 0 5px;
    margin: 0;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    width: 9%;
    color: $text-light;
  }
  .rol-range__close-icon {
    font-size: 14px;
    color: $input-icon-color;
    width: 14px;
    float: right;
    line-height: 32px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
}

@include bem(range-editor) {
  &.rol-input__inner {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
  }
  .rol-range-input {
    line-height: 1;
  }

  @include when(active) {
    border-color: $link;

    &:hover {
      border-color: $link;
    }
  }
  @include modify(medium) {
    &.rol-input__inner {
      height: $input-medium-height;
    }
    .rol-range-separator {
      line-height: 28px;
      font-size: $input-medium-font-size;
    }
    .rol-range-input {
      font-size: $input-medium-font-size;
    }
    .rol-range__icon,
    .rol-range__close-icon {
      line-height: 28px;
    }
  }
  @include modify(small) {
    &.rol-input__inner {
      height: $input-small-height;
    }
    .rol-range-separator {
      line-height: 28px;
      font-size: $input-small-font-size;
    }
    .rol-range-input {
      font-size: $input-small-font-size;
    }
    .rol-range__icon,
    .rol-range__close-icon {
      line-height: 24px;
    }
  }
  @include modify(mini) {
    &.rol-input__inner {
      height: $input-mini-height;
    }
    .rol-range-separator {
      line-height: 28px;
      font-size: $input-mini-font-size;
    }
    .rol-range-input {
      font-size: $input-mini-font-size;
    }
    .rol-range__icon,
    .rol-range__close-icon {
      line-height: 20px;
    }
  }

  @include when(disabled) {
    background-color: $input-disabled-fill;
    border-color: $input-disabled-border;
    color: $input-disabled-color;
    cursor: not-allowed;

    &:hover,
    &:focus {
      border-color: $input-disabled-border;
    }

    input {
      background-color: $input-disabled-fill;
      color: $input-disabled-color;
      cursor: not-allowed;
      &::placeholder {
        color: $input-disabled-placeholder-color;
      }
    }
    .rol-range-separator {
      color: $input-disabled-color;
    }
  }
}

@include bem(time-panel) {
  border-radius: 2px;
  position: relative;
  width: 180px;
  left: 0;
  z-index: 2000;
  user-select: none;
  box-sizing: content-box;

  @include e(content) {
    font-size: 0;
    position: relative;
    overflow: hidden;
    &::after,
    &::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      margin-top: -9px;
      height: 32px;
      z-index: -1;
      box-sizing: border-box;
      padding-top: 6px;
      text-align: left;
      border-top: 1px solid $border-light;
      border-bottom: 1px solid $border-light;
    }

    &::after {
      left: 50%;
      margin-left: 12%;
      margin-right: 12%;
    }

    &::before {
      padding-left: 50%;
      margin-right: 12%;
      margin-left: 12%;
    }

    &.has-seconds {
      &::after {
        left: calc(100% / 3 * 2);
      }

      &::before {
        padding-left: calc(100% / 3);
      }
    }
  }

  @include e(footer) {
    border-top: 1px solid $datepicker-inner-border-color;
    padding: 4px;
    height: 36px;
    line-height: 25px;
    text-align: right;
    box-sizing: border-box;
  }
  @include e(btn) {
    border: none;
    line-height: 28px;
    padding: 0 5px;
    margin: 0 5px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;
    color: $text;

    &.confirm {
      font-weight: 800;
      color: $datepicker-active-color;
    }
  }
}

@include bem(time-range-picker) {
  width: 345px;
  overflow: visible;

  @include e(content) {
    position: relative;
    text-align: center;
    padding: 10px;
    z-index: 1;
  }

  @include e(cell) {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 7px 7px;
    width: 50%;
    display: inline-block;
  }

  @include e(header) {
    margin-bottom: 5px;
    text-align: center;
    font-size: 14px;
  }

  @include e(body) {
    border-radius: 2px;
    border: 1px solid $datepicker-border-color;
  }
}

@include bem(time-spinner) {
  width: 100%;
  white-space: nowrap;
  &.has-seconds {
    .rol-time-spinner__wrapper {
      width: 33.3%;
    }
  }

  @include e(wrapper) {
    max-height: 190px;
    // overflow: auto;
    display: inline-block;
    width: 50%;
    vertical-align: top;
    position: relative;

    & .rol-scrollbar__wrap:not(.rol-scrollbar__wrap--hidden-default) {
      padding-bottom: 15px;
    }

    @include when(arrow) {
      box-sizing: border-box;
      text-align: center;
      overflow: hidden;

      .rol-time-spinner__list {
        transform: translateY(-32px);
      }

      
    }
    .rol-time-spinner__item:hover:not(.disabled):not(.active) {
      background: $background;
      cursor: default;
    }
  }

  @include e(arrow) {
    font-size: 12px;
    color: $text-light;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2000;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer;

    &:hover {
      color: $link;
    }
    &.rol-icon-arrow-up {
      top: 10px;
    }
    &.rol-icon-arrow-down {
      bottom: 10px;
    }
  }

  @include e(input) {
    &.rol-input {
      width: 70%;

      .rol-input__inner {
        padding: 0;
        text-align: center;
      }
    }
  }
  @include e(list) {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;

    &::after,
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 80px;
    }
  }

  @include e(item) {
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    color: $text-light;

    &:hover:not(.disabled):not(.active) {
      background: $white;
      cursor: pointer;
    }

    &.active:not(.disabled) {
      color: $text;
      font-weight: bold;
    }

    &.disabled {
      color: $grey-lightest;
      cursor: not-allowed;
    }
  }
}


@include bem(date-picker) {
  width: 322px;
  &.has-sidebar.has-time {
    width: 434px;
  }
  &.has-sidebar {
    width: 438px;
  }
  &.has-time .rol-picker-panel__body-wrapper {
    position: relative;
  }
  .rol-picker-panel__content {
    width: 292px;
  }

  table {
    table-layout: fixed;
    width: 100%;
  }

  @include e(editor-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;
  }
  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid $datepicker-inner-border-color;
    font-size: 12px;
    padding: 8px 5px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;
  }
  @include e(header) {
    margin: 12px;
    text-align: center;

    @include modify(bordered) {
      margin-bottom: 0;
      padding-bottom: 12px;
      border-bottom: solid 1px $border-light;

      & + .rol-picker-panel__content {
        margin-top: 0;
      }
    }
  }

  @include e(header-label) {
    font-size: 16px;
    font-weight: 500;
    padding: 0 5px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    color: $text;
    &:hover {
      color: $datepicker-hover-font-color;
    }
    &.active {
      color: $datepicker-active-color;
    }
  }

  @include e(prev-btn) {
    float: left;
  }

  @include e(next-btn) {
    float: right;
  }

  @include e(time-wrap) {
    padding: 10px;
    text-align: center;
  }
  @include e(time-label) {
    float: left;
    cursor: pointer;
    line-height: 30px;
    margin-left: 10px;
  }
  .rol-time-panel {
    position: absolute;
  }
}

@include bem(date-range-picker) {
  width: 646px;
  &.has-sidebar {
    width: 756px;
  }
  table {
    table-layout: fixed;
    width: 100%;
  }

  .rol-picker__body {
    min-width: 513px;
  }
  .rol-picker-panel__content {
    margin: 0;
  }

  @include e(header) {
    position: relative;
    text-align: center;
    height: 28px;

    [class*='arrow-left'] {
      float: left;
    }

    [class*='arrow-right'] {
      float: right;
    }

    div {
      font-size: 16px;
      font-weight: 500;
      margin-right: 50px;
    }
  }

  @include e(content) {
    float: left;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    padding: 16px;
    @include when(left) {
      border-right: 1px solid $datepicker-inner-border-color;
    }

    .rol-date-range-picker__header {

      div {
        margin-left: 50px;
        margin-right: 50px;
      }
    }
  }

  @include e(editors-wrap) {
    box-sizing: border-box;
    display: table-cell;
    @include when(right) {
      text-align: right;
    }
  }

  @include e(time-header) {
    position: relative;
    border-bottom: 1px solid $datepicker-inner-border-color;
    font-size: 12px;
    padding: 8px 5px 5px 5px;
    display: table;
    width: 100%;
    box-sizing: border-box;

    > .rol-icon-arrow-right {
      font-size: 20px;
      vertical-align: middle;
      display: table-cell;
      color: $datepicker-icon-color;
    }
  }

  @include e(time-picker-wrap) {
    position: relative;
    display: table-cell;
    padding: 0 5px;

    .rol-picker-panel {
      position: absolute;
      top: 13px;
      right: 0;
      z-index: 1;
      background: $white;
    }
    .rol-time-panel {
      position: absolute;
    }
  }
}

@include bem(date-table) {
  font-size: 12px;
  user-select: none;
  border-spacing: 0;
  border-collapse: collapse;
  @include when(week-mode) {
    .rol-date-table__row {
      &:hover {
        div {
          background-color: $datepicker-inrange-background-color;
        }
        td.available:hover {
          color: $datepicker-font-color;
        }
        td:first-child div {
          margin-left: 5px;
          border-top-left-radius: 15px;
          border-bottom-left-radius: 15px;
        }
        td:last-child div {
          margin-right: 5px;
          border-top-right-radius: 15px;
          border-bottom-right-radius: 15px;
        }
      }
      &.current div {
        background-color: $datepicker-inrange-background-color;
      }
    }
  }

  td {
    width: 32px;
    height: 30px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    position: relative;

    & div {
      height: 30px;
      padding: 3px 0;
      box-sizing: border-box;
    }
    & span {
      width: 24px;
      height: 24px;
      display: block;
      margin: 0 auto;
      line-height: 24px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 50%;
    }

    &.next-month,
    &.prev-month {
      color: $datepicker-off-font-color;
    }

    &.today {
      position: relative;
      span {
        color: $link;
        font-weight: bold;
      }
      &.start-date span,
      &.end-date span {
        color: $white;
      }
    }
    &.available:hover {
      color: $datepicker-hover-font-color;
    }
    &.in-range div {
      background-color: $datepicker-inrange-background-color;
      &:hover {
        background-color: $datepicker-inrange-hover-background-color;
      }
    }

    &.current:not(.disabled) span {
      color: $white;
      background-color: $datepicker-active-color;
    }
    &.start-date div,
    &.end-date div {
      color: $white;
    }
    &.start-date span,
    &.end-date span {
      background-color: $datepicker-active-color;
    }

    &.start-date div {
      margin-left: 5px;
      border-top-left-radius: 15px;
      border-bottom-left-radius: 15px;
    }
    &.end-date div {
      margin-right: 5px;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
    }

    &.disabled div {
      background-color: $white-bis;
      opacity: 1;
      cursor: not-allowed;
      color: $text-light;
    }

    &.selected div {
      margin-left: 5px;
      margin-right: 5px;
      background-color: $datepicker-inrange-background-color;
      border-radius: 15px;
      &:hover {
        background-color: $datepicker-inrange-hover-background-color;
      }
    }
    &.selected span {
      background-color: $datepicker-active-color;
      color: $white;
      border-radius: 15px;
    }
    &.week {
      font-size: 80%;
      color: $datepicker-header-font-color;
    }
  }
  th {
    padding: 5px;
    color: $datepicker-header-font-color;
    font-weight: 400;
    border-bottom: solid 1px $border-light;
  }
}

@include bem(picker-panel) {
  position: relative;
  color: $text;
  background: $white;
  border-radius: $radius;
  line-height: 30px;

  .rol-time-panel {
    margin: 5px 0;
    border: solid 1px $datepicker-border-color;
    background-color: $white;
    box-shadow: $box-shadow-light;
  }

  @include e((body, body-wrapper)) {
    @include clearfix;
  }

  @include e(content) {
    position: relative;
    margin: 15px;
  }

  @include e(footer) {
    border-top: 1px solid $datepicker-inner-border-color;
    padding: 4px;
    text-align: right;
    background-color: $white;
    position: relative;
    font-size: 0;
  }

  @include e(shortcut) {
    display: block;
    width: 100%;
    border: 0;
    background-color: transparent;
    line-height: 28px;
    font-size: 14px;
    color: $datepicker-font-color;
    padding-left: 12px;
    text-align: left;
    outline: none;
    cursor: pointer;

    &:hover {
      color: $datepicker-hover-font-color;
    }
    &.active {
      background-color: $link-light;
      color: $datepicker-active-color;
    }
  }

  @include e(btn) {
    border: 1px solid $background;
    color: #333;
    line-height: 24px;
    border-radius: 2px;
    padding: 0 20px;
    cursor: pointer;
    background-color: transparent;
    outline: none;
    font-size: 12px;

    &[disabled] {
      color: $white-bis;
      cursor: not-allowed;
    }
  }

  @include e(icon-btn) {
    font-size: 12px;
    color: $datepicker-icon-color;
    border: 0;
    background-color: transparent;
    cursor: pointer;
    outline: none;
    margin-top: 6px;
    padding: 1px 6px;

    &:hover {
      color: $datepicker-hover-font-color;
    }

    &:focus {
      outline: none !important;
    }

    @include when(disabled) {
      color: $text-light;

      &:hover {
        cursor: not-allowed;
      }
    }
  }

  @include e(link-btn) {
    vertical-align: middle;
  }
}

.rol-picker-panel *[slot='sidebar'],
.rol-picker-panel__sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  border-right: 1px solid $datepicker-inner-border-color;
  box-sizing: border-box;
  padding-top: 6px;
  background-color: $white;
  overflow: auto;
}

.rol-picker-panel *[slot='sidebar'] + .rol-picker-panel__body,
.rol-picker-panel__sidebar + .rol-picker-panel__body {
  margin-left: 110px;
}

@include bem(month-table) {
  font-size: 12px;
  margin: -1px;
  border-collapse: collapse;
  td {
    text-align: center;
    padding: 8px 0;
    cursor: pointer;
    & div {
      height: 48px;
      padding: 6px 0;
      box-sizing: border-box;
    }
    &.today {
      .cell {
        color: $link;
        font-weight: bold;
      }
      &.start-date .cell,
      &.end-date .cell {
        color: $white;
      }
    }
    &.disabled .cell {
      background-color: $background;
      cursor: not-allowed;
      color: $text-light;

      &:hover {
        color: $text-light;
      }
    }

    .cell {
      width: 60px;
      height: 36px;
      display: block;
      line-height: 36px;
      color: $datepicker-font-color;
      margin: 0 auto;
      border-radius: 18px;
      &:hover {
        color: $datepicker-hover-font-color;
      }
    }

    &.in-range div {
      background-color: $datepicker-inrange-background-color;
      &:hover {
        background-color: $datepicker-inrange-hover-background-color;
      }
    }
    &.start-date div,
    &.end-date div {
      color: $white;
    }

    &.start-date .cell,
    &.end-date .cell {
      color: $white;
      background-color: $datepicker-active-color;
    }
    &.start-date div {
      border-top-left-radius: 24px;
      border-bottom-left-radius: 24px;
    }

    &.end-date div {
      border-top-right-radius: 24px;
      border-bottom-right-radius: 24px;
    }

    &.current:not(.disabled) .cell {
      color: $datepicker-active-color;
    }
  }
}

@include bem(year-table) {
  font-size: 12px;
  margin: -1px;
  border-collapse: collapse;
  .rol-icon {
    color: $datepicker-icon-color;
  }

  td {
    text-align: center;
    padding: 20px 3px;
    cursor: pointer;

    &.today {
      .cell {
        color: $link;
        font-weight: bold;
      }
    }

    &.disabled .cell {
      background-color: $background;
      cursor: not-allowed;
      color: $text-light;

      &:hover {
        color: $text-light;
      }
    }
    .cell {
      width: 48px;
      height: 32px;
      display: block;
      line-height: 32px;
      color: $datepicker-font-color;
      margin: 0 auto;

      &:hover {
        color: $datepicker-hover-font-color;
      }
    }
    &.current:not(.disabled) .cell {
      color: $datepicker-active-color;
    }
  }
}



$checkbox-font-size: 14px !default;
$checkbox-font-weight: $weight-medium !default;
$checkbox-font-color: $text !default;
$checkbox-input-height: 14px !default;
$checkbox-input-width: 14px !default;
$checkbox-border-radius: $radius-small !default;
$checkbox-background-color: $white !default;
$checkbox-input-border: 1px solid $border !default;
$checkbox-disabled-border-color: $border !default;
$checkbox-disabled-input-fill: $background !default;
$checkbox-disabled-icon-color: $grey-lighter !default;
$checkbox-disabled-checked-input-fill: $background !default;
$checkbox-disabled-checked-input-border-color: $grey-lighter !default;
$checkbox-disabled-checked-icon-color: $grey-lighter !default;
$checkbox-checked-font-color: $link !default;
$checkbox-checked-input-border-color: $link !default;
$checkbox-checked-background-color: $link !default;
$checkbox-checked-icon-color: $white !default;
$checkbox-input-border-color-hover: $link !default;
$checkbox-bordered-height: 40px !default;
$checkbox-bordered-padding: 9px 20px 9px 10px !default;
$checkbox-bordered-medium-padding: 7px 20px 7px 10px !default;
$checkbox-bordered-small-padding: 5px 15px 5px 10px !default;
$checkbox-bordered-mini-padding: 3px 15px 3px 10px !default;
$checkbox-bordered-medium-input-height: 14px !default;
$checkbox-bordered-medium-input-width: 14px !default;
$checkbox-bordered-medium-height: 36px !default;
$checkbox-bordered-small-input-height: 12px !default;
$checkbox-bordered-small-input-width: 12px !default;
$checkbox-bordered-small-height: 32px !default;
$checkbox-bordered-mini-input-height: 12px !default;
$checkbox-bordered-mini-input-width: 12px !default;
$checkbox-bordered-mini-height: 28px !default;
$checkbox-button-checked-background-color: $link !default;
$checkbox-button-checked-font-color: $white !default;
$checkbox-button-checked-border-color: $link !default;

@include bem(checkbox) {
  color: $checkbox-font-color;
  font-weight: $checkbox-font-weight;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
  margin-right: 30px;

  @include when(bordered) {
    padding: $checkbox-bordered-padding;
    border-radius: $radius;
    border: 1px solid $border;
    box-sizing: border-box;
    line-height: normal;
    height: $checkbox-bordered-height;
    &.is-checked {
      border-color: $link;
    }
    &.is-disabled {
      border-color: $border-light;
      cursor: not-allowed;
    }

    & + .rol-checkbox.is-disabled {
      margin-left: 10px;
    }

    &.rol-checkbox--medium {
      padding: $checkbox-bordered-medium-padding;
      border-radius: $radius;
      height: $checkbox-bordered-medium-height;

      .rol-checkbox__label {
        line-height: 17px;
        font-size: $font-size-base;
      }
      .rol-checkbox__inner {
        height: $checkbox-bordered-medium-input-height;
        width: $checkbox-bordered-medium-input-width;
      }
    }

    &.rol-checkbox--small {
      padding: $checkbox-bordered-small-padding;
      border-radius: $radius-small;
      height: $checkbox-bordered-small-height;

      &.rol-checkbox__label {
        line-height: 15px;
        font-size: $font-size-small;
      }
      .rol-checkbox__inner {
        height: $checkbox-bordered-small-input-height;
        width: $checkbox-bordered-small-input-width;

        &::after {
          height: 6px;
          width: 2px;
        }
      }
    }
    &.rol-checkbox--mini {
      padding: $checkbox-bordered-mini-padding;
      border-radius: $radius-small;
      height: $checkbox-bordered-mini-height;
      .rol-checkbox__label {
        line-height: 12px;
        font-size: 12px;
      }
      .rol-checkbox__inner {
        height: $checkbox-bordered-mini-input-height;
        width: $checkbox-bordered-mini-input-width;
        &::after {
          height: 6px;
          width: 2px;
        }
      }
    }
  }
  @include e(input) {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;

    @include when(disabled) {
      .rol-checkbox__inner {
        background-color: $checkbox-disabled-input-fill;
        border-color: $checkbox-disabled-border-color;
        cursor: not-allowed;

        &::after {
          cursor: not-allowed;
          border-color: $checkbox-disabled-checked-icon-color;
        }

        & + .rol-checkbox__label {
          cursor: not-allowed;
        }
      }

      &.is-checked {
        .rol-checkbox__inner {
          background-color: $checkbox-disabled-input-fill;
          border-color: $checkbox-disabled-border-color;

          &::after {
            border-color: $checkbox-disabled-checked-icon-color;
          }
        }
      }

      &.is-indeterminate {
        .rol-checkbox__inner {
          background-color: $checkbox-disabled-checked-input-fill;
          border-color: $checkbox-disabled-checked-input-border-color;

          &::before {
            background-color: $checkbox-disabled-checked-icon-color;
            border-color: $checkbox-disabled-checked-icon-color;
          }
        }
      }

      & + span.rol-checkbox__label {
        color: $grey-light;
        cursor: not-allowed;
      }
    }

    @include when(checked) {
      .rol-checkbox__inner {
        background-color: $checkbox-checked-background-color;
        border-color: $checkbox-checked-input-border-color;

        &::after {
          transform: rotate(45deg) scaleY(1);
        }
      }

      & + .rol-checkbox__label {
        color: $checkbox-checked-font-color;
      }
    }
    @include when(focus) {
      .rol-checkbox__inner {
        border-color: $checkbox-input-border-color-hover;
      }
    }
    @include when(indeterminate) {
      .rol-checkbox__inner {
        background-color: $checkbox-checked-background-color;
        border-color: $checkbox-checked-input-border-color;

        &::before {
          content: '';
          position: absolute;
          display: block;
          background-color: $checkbox-checked-icon-color;
          height: 2px;
          transform: scale(0.5);
          left: 0;
          right: 0;
          top: 5px;
        }
        &::after {
          display: none;
        }
      }
    }
  }
  @include e(inner) {
    display: inline-block;
    position: relative;
    border: $checkbox-input-border;
    border-radius: $checkbox-border-radius;
    box-sizing: border-box;
    width: $checkbox-input-width;
    height: $checkbox-input-height;
    background-color: $checkbox-background-color;
    // z-index: 2000;
    transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
      background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
    &:hover {
      border-color: $checkbox-input-border-color-hover;
    }
    &::after {
      box-sizing: content-box;
      content: '';
      border: 1px solid $checkbox-checked-icon-color;
      border-left: 0;
      border-top: 0;
      height: 7px;
      left: 4px;
      position: absolute;
      top: 1px;
      transform: rotate(45deg) scaleY(0);
      width: 3px;
      transition: transform 0.15s ease-in 0.05s;
      transform-origin: center;
    }
  }
  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    width: 0;
    height: 0;
    z-index: -1;
  }
  @include e(label) {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: $checkbox-font-size;
  }
  &:last-of-type {
    margin-right: 0;
  }
}

@include bem(checkbox-button) {
  &.rol-button:focus:not(:active),
  &.rol-button.is-focused:not(:active) {
    box-shadow: none;
  }
  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    z-index: -1;
  }
  &.is-checked {
    color: $white;
    background-color: $link;
    border-color: $link;
    box-shadow: -1px 0 0 0 $grey-lighter;
  }
}

$radio-font-size: $font-size-base !default;
$radio-font-weight: $weight-normal !default;
$radio-font-color: $text-light !default;
$radio-input-height: 14px !default;
$radio-input-width: 14px !default;
$radio-input-border-radius: $radius-rounded !default;
$radio-input-background-color: $white !default;
$radio-input-border: 1px solid $text-light !default;
$radio-input-border-color: $border !default;
$radio-icon-color: $white !default;
$radio-disabled-input-border-color: $border-light !default;
$radio-disabled-input-fill: $background !default;
$radio-disabled-icon-color: $background !default;
$radio-disabled-checked-input-border-color: $border-light !default;
$radio-disabled-checked-input-fill: $background !default;
$radio-disabled-checked-icon-color: $text-light !default;
$radio-checked-font-color: $link !default;
$radio-checked-input-border-color: $link !default;
$radio-checked-input-background-color: $white !default;
$radio-checked-icon-color: $link !default;
$radio-input-border-color-hover: $link !default;
$radio-bordered-height: 40px !default;
$radio-bordered-padding: 12px 20px 0 10px !default;
$radio-bordered-medium-padding: 10px 20px 0 10px !default;
$radio-bordered-small-padding: 8px 15px 0 10px !default;
$radio-bordered-mini-padding: 6px 15px 0 10px !default;
$radio-bordered-medium-input-height: 14px !default;
$radio-bordered-medium-input-width: 14px !default;
$radio-bordered-medium-height: 36px !default;
$radio-bordered-small-input-height: 12px !default;
$radio-bordered-small-input-width: 12px !default;
$radio-bordered-small-height: 32px !default;
$radio-bordered-mini-input-height: 12px !default;
$radio-bordered-mini-input-width: 12px !default;
$radio-bordered-mini-height: 28px !default;
$radio-button-font-size: $font-size-base !default;
$radio-button-checked-background-color: $link !default;
$radio-button-checked-font-color: $white !default;
$radio-button-checked-border-color: $link !default;
$radio-button-disabled-checked-fill: $grey-lighter !default;

@include bem(radio) {
  color: $radio-font-color;
  font-weight: $radio-font-weight;
  line-height: 1;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  outline: none;
  font-size: $font-size-base;
  margin-right: 30px;
  @include unselectable;

  @include when(bordered) {
    padding: $radio-bordered-padding;
    border-radius: $radius;
    border: 1px solid $text-light;
    box-sizing: border-box;
    height: $radio-bordered-height;

    &.is-checked {
      border-color: $link;
    }

    &.is-disabled {
      cursor: not-allowed;
      border-color: $border-light;
    }
    & + .rol-radio.is-bordered {
      margin-left: 10px;
    }
  }
  @include modify(medium) {
    &.is-bordered {
      padding: $radio-bordered-medium-padding;
      border-radius: $radius;
      height: $radio-bordered-medium-height;
      .rol-radio__label {
        font-size: $font-size-base;
      }
      .rol-radio__inner {
        height: $radio-bordered-medium-input-height;
        width: $radio-bordered-medium-input-width;
      }
    }
  }
  @include modify(small) {
    &.is-bordered {
      padding: $radio-bordered-small-padding;
      border-radius: $radius-small;
      height: $radio-bordered-small-height;
      .rol-radio__label {
        font-size: $font-size-small;
      }
      .rol-radio__inner {
        height: $radio-bordered-small-input-height;
        width: $radio-bordered-small-input-width;
      }
    }
  }
  @include modify(mini) {
    &.is-bordered {
      padding: $radio-bordered-mini-padding;
      border-radius: $radius-small;
      height: $radio-bordered-mini-height;
      .rol-radio__label {
        font-size: $font-size-extra-small;
      }
      .rol-radio__inner {
        height: $radio-bordered-mini-input-height;
        width: $radio-bordered-mini-input-width;
      }
    }
  }
  &:last-child {
    margin-right: 0;
  }

  @include e(input) {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    @include when(disabled) {
      .rol-radio__inner {
        background-color: $radio-disabled-input-fill;
        border-color: $radio-disabled-input-border-color;
        cursor: not-allowed;

        &::after {
          cursor: not-allowed;
          background-color: $radio-disabled-icon-color;
        }
        & + .rol-radio__label {
          cursor: not-allowed;
        }
      }
      &.is-checked {
        .rol-radio__inner {
          background-color: $radio-disabled-checked-input-fill;
          border-color: $radio-disabled-checked-input-border-color;
          &::after {
            background-color: $radio-disabled-checked-icon-color;
          }
        }
      }
      & + span.rol-radio__label {
        color: $text-lighter;
        cursor: not-allowed;
      }
    }
    @include when(checked) {
      .rol-radio__inner {
        border-color: $radio-checked-input-border-color;
        background: $radio-checked-icon-color;
        &::after {
          transform: translate(-50%, -50%) scale(1);
        }
      }
      & + .rol-radio__label {
        color: $radio-checked-font-color;
      }
    }
    @include when(focus) {
      .rol-radio__inner {
        border-color: $radio-input-border-color-hover;
      }
    }
  }
  @include e(inner) {
    border: $radio-input-border;
    border-radius: $radio-input-border-radius;
    width: $radio-input-width;
    height: $radio-input-height;
    background-color: $radio-input-background-color;
    position: relative;
    cursor: pointer;
    display: inline-block;
    box-sizing: border-box;
    &:hover {
      border-color: $radio-input-border-color-hover;
    }

    &::after {
      width: 4px;
      height: 4px;
      border-radius: $radio-input-border-radius;
      background-color: $white;
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0);
      transition: transform 0.15s ease-in;
    }
  }
  @include e(original) {
    opacity: 0;
    outline: none;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
  }

  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
    .rol-radio__inner {
      box-shadow: 0 0 2px 2px $radio-input-border-color-hover;
    }
  }

  @include e(label) {
    font-size: $radio-font-size;
    padding-left: 10px;
  }
}

@include bem(radio-group) {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  font-size: 0;
}

@include bem(radio-button) {
  @include e(orig-radio) {
    opacity: 0;
    outline: none;
    position: absolute;
    margin: 0;
    z-index: -1;
  }

  &.is-active {
    color: $white;
    background-color: $link;
    border-color: $link;
    box-shadow: -1px 0 0 0 $grey-lighter;
  }
}