/**
 * Mixins
 * @Author 瞿龙俊 - qulongjun@shine.design
 * @Date 2020-03-22 13:02
 */

@mixin shine-clearfix() {
  &:before,
  &:after {
    content: " "; // 1
    display: table; // 2
  }
  &:after {
    clear: both;
  }
}

@mixin shine-button-reset() {
  appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  background: none;
  outline: none !important;
  margin: 0;
  padding: 0;
}

@mixin shine-input-reset() {
  border: 0;
  background: none;
  outline: none !important;
  box-shadow: none;
}

@mixin shine-btn-reset() {
  border: 0;
  background: none;
  outline: none !important;
  box-shadow: none;
  outline: none !important;
}

@mixin shine-fix-fixed-position-lags() {
  // webkit hack for smooth font view on fixed positioned elements
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

@mixin shine-fix-animation-lags() {
  transform: translateZ(0);
  -webkit-transform-style: preserve-3d;
}

@mixin shine-attr($attr, $value, $important: '') {
  @if $value != null {
    #{$attr}: #{$value} #{$important};
  }
}

@mixin shine-hack-ie {
  @media screen
  {
    @content;
  }
}

@mixin shine-hack-edge-all {
  @supports (-ms-ime-align:auto) {
    @content;
  }
}

@mixin shine-rounded {
  @if $shine-rounded == true {
    @content;
  }
}

@mixin shine-not-rounded {
  @if $shine-rounded == false {
    @content;
  }
}

// Input placeholder color
@mixin shine-input-placeholder($color) {
  &::-moz-placeholder {
    color: $color;
    opacity: 1;
  }
  // See https://github.com/twbs/bootstrap/pull/11526
  &:-ms-input-placeholder {
    color: $color;
  }
  // Internet Explorer 10+
  &::-webkit-input-placeholder {
    color: $color;
  }
  // Safari and Chrome
}

@mixin shine-hover-transition {
  transition: $shine-transition;

  &:hover {
    transition: $shine-transition;
  }
}

@mixin shine-transition {
  transition: $shine-transition;
}

// Icon Sizing
// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin shine-icons-size($config) {
  // Lineawesome
  [class^="la-"],
  [class*=" la-"] {
    font-size: shine-get($config, lineawesome);
  }

  // Fontawesome
  [class^="fa-"],
  [class*=" fa-"] {
    font-size: shine-get($config, fontawesome);
  }

  // Flaticon
  [class^="flaticon-"],
  [class*=" flaticon-"],
  [class^="flaticon2-"],
  [class*=" flaticon2-"] {
    font-size: shine-get($config, flaticon);
  }
}

// Icon attr
// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin shine-icons-style($attr, $config) {
  // lineawesome
  [class^="la-"],
  [class*=" la-"] {
    #{$attr}: shine-get($config, lineawesome);
  }

  // Fontawesome
  [class^="fa-"],
  [class*=" fa-"] {
    #{$attr}: shine-get($config, fontawesome);
  }

  // Flaticon
  [class^="flaticon-"],
  [class*=" flaticon-"],
  [class^="flaticon2-"],
  [class*=" flaticon2-"] {
    #{$attr}: shine-get($config, flaticon);
  }
}

// SASS Map:  (lineawesome: 1.1rem, fontawesome: 1.2rem, flaticon: 1.1rem)
@mixin shine-icons {
  [class^="la-"],
  [class*=" la-"],
  [class^="fa-"],
  [class*=" fa-"],
  [class^="flaticon-"],
  [class*=" flaticon-"],
  [class^="flaticon2-"],
  [class*=" flaticon2-"] {
    @content;
  }
}

// Lineawesome icon
@mixin shine-la-icon($icon) {
  font-family: "LineAwesome";
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;

  &:before {
    content: "#{$icon}";
  }
}

@mixin shine-la-icon-change($icon) {
  &:before {
    content: "#{$icon}";
  }
}

@mixin shine-flaticon2-icon($icon) {
  font-family: Flaticon2;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  line-height: 1;
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  content: "#{$icon}";
}

// Lineawesome icon
@mixin shine-la-icon-self($icon) {
  font-family: "LineAwesome";
  text-decoration: inherit;
  text-rendering: optimizeLegibility;
  text-transform: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  content: "#{$icon}";
}

// Close icon
@mixin shine-close-icon($self:null) {
  @if $self == true {
    @include shine-la-icon-self(shine-get($shine-action-icons, close));
  } @else {
    @include shine-la-icon(shine-get($shine-action-icons, close));
  }
}

// Arrow icon
@mixin shine-arrow-icon($dir, $self:null) {
  @if $dir == down {
    @if $self == true {
      @include shine-la-icon-self(shine-get($shine-action-icons, down));
    } @else {
      @include shine-la-icon(shine-get($shine-action-icons, down));
    }
  }

  @if $dir == up {
    @if $self == true {
      @include shine-la-icon-self(shine-get($shine-action-icons, up));
    } @else {
      @include shine-la-icon(shine-get($shine-action-icons, up));
    }
  }

  @if $dir == left {
    @if $self == true {
      @include shine-la-icon-self(shine-get($shine-action-icons, left));
    } @else {
      @include shine-la-icon(shine-get($shine-action-icons, left));
    }
  }

  @if $dir == right {
    @if $self == true {
      @include shine-la-icon-self(shine-get($shine-action-icons, right));
    } @else {
      @include shine-la-icon(shine-get($shine-action-icons, right));
    }
  }
}

// Svg icon color
@mixin shine-svg-icon-color($color) {
  g {
    [fill] {
      transition: fill 0.3s ease;
      fill: $color;
    }
  }

  &:hover {
    g {
      [fill] {
        transition: fill 0.3s ease;
      }
    }
  }
}

// Breakpoint mixins
// Layout Breakpoints
// Define the minimum and maximum dimensions at which your layout will change, adapting to different screen sizes, for use in media queries.

@mixin shine-media-below($width) {
  @media (max-width: #{shine-media-breakpoint($width)}) {
    @content;
  }
}

@mixin shine-media-above($width) {
  @media (min-width: #{shine-media-breakpoint($width) + 1px}) {
    @content;
  }
}

@mixin shine-media-range($from, $to) {
  @media (min-width: #{shine-media-breakpoint($from) + 1px}) and (max-width: #{shine-media-breakpoint($to)}) {
    @content;
  }
}

@mixin shine-minimal-desktop {
  @media (min-width: #{shine-media-breakpoint(lg) + 1px}) and (max-width: #{shine-media-breakpoint(xl)}) {
    @content;
  }
}

@mixin shine-minimal-desktop-and-below {
  @media (max-width: #{shine-media-breakpoint(xl)}) {
    @content;
  }
}

@mixin shine-desktop {
  @media (min-width: #{shine-media-breakpoint(lg) + 1px}) {
    @content;
  }
}

@mixin shine-desktop-xl {
  @media (min-width: #{shine-media-breakpoint(xl) + 1px}) {
    @content;
  }
}

@mixin shine-desktop-xxl {
  @media (min-width: #{shine-media-breakpoint(xxl) + 1px}) {
    @content;
  }
}

@mixin shine-desktop-and-tablet {
  @media (min-width: #{shine-media-breakpoint(md) + 1px}) {
    @content;
  }
}

@mixin shine-tablet {
  @media (min-width: #{shine-media-breakpoint(md) + 1px}) and (max-width: #{shine-media-breakpoint(lg)}) {
    @content;
  }
}

@mixin shine-tablet-and-mobile {
  @media (max-width: #{shine-media-breakpoint(lg)}) {
    @content;
  }
}

@mixin shine-mobile {
  @media (max-width: #{shine-media-breakpoint(md)}) {
    @content;
  }
}

@mixin shine-mobile-sm {
  @media (max-width: #{shine-media-breakpoint(sm)}) {
    @content;
  }
}

@mixin shine-responsive-below($width) {
  @media (max-width: #{$width}) {
    @content;
  }
}

@mixin shine-responsive-above($width) {
  @media (min-width: #{$width}) {
    @content;
  }
}

@mixin shine-responsive-range($from, $to) {
  @media (min-width: #{$from}) and (max-width: #{$to}) {
    @content;
  }
}