// y-ui standard style library (SCSS)

$y-ui-prefix: y;

// Animation
$ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1) !default;
$ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7) !default;
$ease-out: cubic-bezier(0.215, 0.61, 0.355, 1) !default;
$ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19) !default;
$ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1) !default;
$ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46) !default;
$ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6) !default;
$ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46) !default;
$ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1) !default;
$ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34) !default;
$ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86) !default;
$ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1) !default;
$ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06) !default;
$ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1) !default;

// Color
$skyblue: #3cbaff !default;

$blue1: #4598f0 !default;
$blue2: #418cdb !default;
$blue1-10: fade-in($blue1, 0.1) !default;
$blue1-20: fade-in($blue1, 0.2) !default;

$red1: #ea5e56 !default;
$red2: #dd4e45 !default;
$red1-10: fade-in($red1, 0.1) !default;
$red1-20: fade-in($red1, 0.2) !default;

$yellow1: #f59c25 !default;
$yellow2: #eb8e12 !default;
$yellow1-10: fade-in($yellow1, 0.1) !default;
$yellow1-20: fade-in($yellow1, 0.2) !default;

$orange1: #e26735 !default;
$orange2: #d85925 !default;
$orange1-10: fade-in($orange1, 0.1) !default;
$orange1-20: fade-in($orange1, 0.2) !default;

$green1: #32aa70 !default;
$green2: #17a05e !default;
$green1-10: fade-in($green1, 0.1) !default;
$green1-20: fade-in($green1, 0.2) !default;

$teal1: #13bbad !default;
$teal2: #14ab9f !default;
$teal1-10: fade-in($teal1, 0.1) !default;
$teal1-20: fade-in($teal1, 0.2) !default;

$cyan1: #3fb7df !default;
$cyan2: #2ca8d1 !default;
$cyan1-10: fade-in($cyan1, 0.1) !default;
$cyan1-20: fade-in($cyan1, 0.2) !default;

$indigo1: #4570d3 !default;
$indigo2: #4168c1 !default;
$indigo1-10: fade-in($indigo1, 0.1) !default;
$indigo1-20: fade-in($indigo1, 0.2) !default;

$purple1: #655dd4 !default;
$purple2: #5e57c2 !default;
$purple1-10: fade-in($purple1, 0.1) !default;
$purple1-20: fade-in($purple1, 0.2) !default;

$pink1: #de4873 !default;
$pink2: #d23c67 !default;
$pink1-10: fade-in($pink1, 0.1) !default;
$pink1-20: fade-in($pink1, 0.2) !default;

$gray1: #484b51 !default;
$gray2: #44464c !default;
$gray1-10: fade-in($gray1, 0.1) !default;
$gray1-20: fade-in($gray1, 0.2) !default;

$brown1: #bd784d !default;
$brown2: #b06a3e !default;
$brown1-10: fade-in($brown1, 0.1) !default;
$brown1-20: fade-in($brown1, 0.2) !default;

$nc1: #1d1d1d !default;
$nc2: #272f32 !default;
$nc3: #3d464a !default;
$nc4: #465459 !default;
$nc5: #768893 !default;
$nc6: #adb8be !default;
$nc7: #c2ccd0 !default;
$nc8: #d7dee3 !default;
$nc9: #e6ebee !default;
$nc10: #f1f4f9 !default;
$nc11: #f4f6fa !default;
$nc12: #f8f9fb !default;

$white: #ffffff !default;
$white-20: fade-in($white, 0.2) !default;
$white-80: fade-in($white, 0.8) !default;

$shadow: #0c213f !default;
$shadow1: 0px 3px 6px fade-in($shadow, 0.12) !default;
$shadow2: 0px 6px 16px fade-in($shadow, 0.18) !default;
$shadow3: 0px 9px 30px fade-in($shadow, 0.2) !default;

$mask1: #0c213f !default;
$mask2: fade-in($mask1, 0.3) !default;
$mask3: fade-in($mask1, 0.8) !default;

$grad1: linear-gradient(270deg, $blue1 0%, #3f70ff 100%) !default;

// Border
$border_solid-thin: 1px solid !default;
$border_dashed-thin: 1px dashed !default;
$border-radius: 0px !default;
$border-radius-2: 2px !default;
$border-radius-4: 4px !default;
$border-radius-8: 8px !default;
$border-radius-30: 30px !default;

// Font
$fontFamily: Helvetica, sans-serif, '-apple-system', Arial, Microsoft YaHei, Microsoft JhengHei,
  Helvetica Neue, sans-serif;
@mixin font12 {
  font-size: 12px;
  line-height: 16px;
}
@mixin font13 {
  font-size: 13px;
  line-height: 18px;
}
@mixin font14 {
  font-size: 14px;
  line-height: 20px;
}
@mixin font16 {
  font-size: 16px;
  line-height: 22px;
}
@mixin font18 {
  font-size: 18px;
  line-height: 26px;
}
@mixin font20 {
  font-size: 20px;
  line-height: 28px;
}
@mixin font24 {
  font-size: 24px;
  line-height: 24px;
}
@mixin font30 {
  font-size: 30px;
  line-height: 42px;
}

// Space
$space4: 4px !default;
$space8: $space4 * 2 !default;
$space12: $space4 * 3 !default;
$space16: $space4 * 4 !default;
$space24: $space4 * 6 !default;
$space32: $space4 * 8 !default;