@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("settings") { @import "settings"; }
@if not-imported("functions") { @import "functions"; }

/**
 * Layout
 */
@mixin centered($max-width: $breakpoint-desktop, $resp-padding: 15px) {
  max-width: $max-width;
  margin: 0 auto;
  position: relative;

  @media screen and (max-width: $max-width + 2 * $resp-padding) {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: $resp-padding;
    padding-right: $resp-padding;
  }
}
@mixin centered-1200 {
 @include centered();
}

/**
 * Responsive
 */
@mixin for-max-size($size) {
  @media screen and (max-width: $size) { @content; }
}
@mixin for-min-size($size) {
  @media screen and (min-width: $size) { @content; }
}
@mixin for-tablet {
  @include for-max-size($breakpoint-tablet) { @content; }
}
@mixin for-mobile {
  @include for-max-size($breakpoint-mobile) { @content; }
}
@mixin for-tablet-up {
  @include for-min-size($breakpoint-mobile+1) { @content; }
}
@mixin for-desktop-up {
  @include for-min-size($breakpoint-tablet+1) { @content; }
}

/**
 * Shorthand
 */
@mixin transform($transform...) {
  -webkit-transform: $transform;
  -moz-transform: $transform;
  -ms-transform: $transform;
  -o-transform: $transform;
  transform: $transform;
}

@mixin transition($transition...) {
  -webkit-transition: $transition;
  -moz-transition: $transition;
  -ms-transition: $transition;
  -o-transition: $transition;
  transition: $transition;
}

@mixin box-sizing($boxval) {
  -webkit-box-sizing: $boxval;
  -moz-box-sizing: $boxval;
  box-sizing: $boxval;
}

@mixin box-shadow($shadow...) {
  -webkit-box-shadow: $shadow;
  -moz-box-shadow: $shadow;
  box-shadow: $shadow;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

@mixin filter($filter) {
  -webkit-filter: $filter;
  -ms-filter: $filter;
  filter: $filter;
}

@mixin placeholder {
  &::-webkit-placeholder {
    @content;
  }
  &:-moz-placeholder {
    @content;
  }
  &::-moz-placeholder {
    @content;
  }
  &:-ms-input-placeholder {
    @content;
  }
  &::-ms-input-placeholder {
    @content;
  }
  &:-ms-placeholder {
    @content;
  }
  &:-o-placeholder {
    @content;
  }
  &::placeholder {
    @content;
  }
}

@mixin aspect-ratio($width, $height, $float: false) {
  position: relative;
  @if $float {
    overflow: hidden;
    &:before {
      display: table;
      content: "";
      padding-top: ($height / $width) * 100%;
      float: left;
    }
  } @else {
    &:before {
      display: block;
      content: "";
      width: 100%;
      padding-top: ($height / $width) * 100%;
    }
    > * {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

/// Mixin printing a linear-gradient
/// as well as a plain color fallback
/// and the `-webkit-` prefixed declaration
/// @access public
/// @param {String | List | Angle} $direction - Linear gradient direction
/// @param {Arglist} $color-stops - List of color-stops composing the gradient
@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: ($direction, $color-stops);
    $direction: 180deg;
  }

  background: nth(nth($color-stops, 1), 1);
  background: -webkit-linear-gradient(legacy-direction($direction), $color-stops);
  background: linear-gradient($direction, $color-stops);
}

@mixin column-classes($gutter-width, $max-columns, $class-name) {
  @for $cols from 1 through $max-columns {
    @for $span from 1 through $cols {
      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
        flex-basis: 100% / $cols * $span - ($gutter-width * 100%);
        max-width: 100% / $cols * $span - ($gutter-width * 100%);
        order: 6;
      }
    }
  }

  @for $cols from 1 through $max-columns {
    &.-#{unquote($class-name)}-order-#{$cols} {
      order: $cols;
    }
  }
}

/**
 * Object Fit
 */
@mixin object-fit($mode: cover) {
  object-fit: $mode;
  font-family: 'object-fit: #{$mode};';
  display: block;
  width: 100%;
  height: 100%;
}

/**
 * Fonts
 */
@mixin iconfont {
  display: inline-block;
  font-family: $font-family-icon !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: -0.1em;
}

@mixin icon($content: "", $font-size: 100%, $line-height: 1) {
  @include iconfont;
  font-size: $font-size;
  line-height: $line-height;
  @if $content != "" {
    content: $content;
  }
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-indent: 0;
  display: inline-block;
  position: relative;
}

/**
 * Clearfix
 */
@mixin cf {
  &:before,
  &:after {
    content: " "; /* 1 */
    display: table; /* 2 */
  }

  &:after {
    clear: both;
  }

  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  & {
    *zoom: 1;
  }
}

/**
 * Text-Styling
 */
@mixin headline($font-size: 100%, $font-weight: 400, $color: $color-headline, $font-family: $font-family) {
  font-family: $font-family-alternate;
  color: $color;
  font-weight: $font-weight;
  font-size: $font-size;
}

@mixin text-overflow-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**
 * Boxes
 */

@mixin box {
  &:not(.rs-columns) {
    background-color: $color-bg-primary;
    padding: 20px 35px;
    @include box-sizing(border-box);

    .-has-buttons&,
    &.-has-button {
      position: relative;
      padding-bottom: 65px;
    }

    .cta-button:last-child {
      position: absolute;
      bottom: 20px;
      left: 35px;
      right: 35px;
    }
  }

  &.rs-columns {
    margin-left: -10px;
    margin-top: 0;
    > * {
      flex-shrink: 1;
      flex-grow: 1;
      background-color: $color-bg-primary;
      margin-left: 10px;
      margin-top: 20px;
      padding: 20px 35px;
      @include box-sizing(border-box);
      position: relative;

      .-has-buttons&,
      &.-has-button {
        padding-bottom: 65px;
      }

      .cta-button:last-child {
        position: absolute;
        bottom: 20px;
        left: 35px;
        right: 35px;
      }
    }
  }
}
@mixin box-black{
  @include box;
  &:not(.rs-columns) {
    background-color: $color-bg-secondary;
    color: $color-text-invert;
  }

  &.rs-columns {
    > * {
      background-color: $color-bg-secondary;
      color: $color-text-invert;
    }
  }
}
@mixin box-white{
  @include box;
  border: 1px $color-stroke-grey solid;
}
@mixin box-yellow {
  @include box;
  background-color: $color-bg-primary;
  border: 1px $color-stroke-light solid;
  padding: 10px;
}
@mixin box-grey {
  @include box;
  background-color: $color-bg-footer;
  padding: 10px;
}

/**
 * Buttons
 */

@mixin button($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-button, $color-hover: $button-color-hl, $border-color-hover: $button-border-color-hl, $background-color-hover: $button-background-color-hl) {
  position: relative;
  font-family: $font-family-form;
  background: $background-color;
  color: $color;
  font-size: $font-size;
  font-weight: 400;
  display: inline-block;
  padding: $button-padding;
  height: $button-height;
  line-height: #{$button-height - (2*$button-border-width) - (2*$button-padding-vertical)};
  white-space: nowrap;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: $button-border-width $border-color solid;
  cursor: pointer;
  text-align: center;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in;
  -ms-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
  text-transform: uppercase;

  &[data-icon]:not([data-icon=""]) {
    &:after {
      @include icon(attr(data-icon),font-size(20px),inherit);
      vertical-align: bottom;
      margin-left: 1ex;
    }
  }

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

@mixin button-text {
  @include button($color: $color-text, $color-hover: $color-text, $background-color-hover: none);
  background: none;
  border: none;
  height: auto;
  padding: 0;
  margin-right: auto;
  color: $color-text;
  text-transform: uppercase;
  font-size: font-size(14px);
  font-weight: 600;
  letter-spacing: 0.1em;
}

@mixin button-icon-only($color: $button-color, $border-color: $button-border-color, $background-color: $button-background-color, $font-size: $font-size-default, $color-hover: $color, $border-color-hover: $border-color, $border-background-hover: mix($background-color,#000,70%)) {
  @include button($color,$border-color,$background-color,$font-size,$color-hover,$border-color-hover,$border-background-hover);
  min-width: $button-height;
  text-indent: -9999px;
  overflow: hidden;
  font-size: 100%;

  &:after {
    text-indent: 0;
    float: left;
    margin: 0;
    width: #{$button-height - (2*$button-padding-horizontal) - (2*$button-border-width)};
  }
}

@mixin button-no-icon {
  &:after {
    display: none;
  }
}

@mixin button-block {
  display: block;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin button-outline($color: $button-o-color, $border-color: $button-o-border-color, $font-size: $font-size-default, $color-hover: $button-o-color-hl, $border-color-hover: $button-o-border-color-hl, $border-background-hover: $button-o-background-color-hl) {
  @include button($color,$border-color,transparent,$font-size,$color-hover,$border-color-hover,$border-background-hover);
}

/**
 * Avatar + Profiles
 */
@mixin avatar($size: 50px, $stroke-width: 3px) {
  position: relative;
  width: $size+2*$stroke-width;
  height: $size+2*$stroke-width;
  margin-right: 1em;
  margin-bottom: 0.5em;
  display: inline-block;
  vertical-align: middle;
  &:before {
    position: absolute;
    left: 0;
    right: 0;
    content: "";
    display: inline-block;
    width: $size;
    height: $size;
    border-radius: $size;
    vertical-align: middle;
    /*-webkit-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
    -moz-box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .3);*/
  }
  &[data-letters]:before {
    content: attr(data-letters);
    font-size: font-size($size*0.4);
    font-weight: 400;
    line-height: $size;
    text-align: center;
    color: white;
    background: $color-bg-tertiary;
    border: $stroke-width $color-stroke-grey solid;
  }
  &[data-staff] {
    margin-right: #{$size*0.56-(($size+2*$stroke-width)*0.14*2)};
    &:after {
      @include icon("\ec66",font-size($size*0.14),4em);
      position: absolute;
      left: 100%;
      bottom: -0.5em;
      margin-left: -#{($size+2*$stroke-width)*0.14*2};
      padding: 0;
      width: 4em;
      height: 4em;
      -webkit-border-radius: 4em;
      -moz-border-radius: 4em;
      border-radius: 4em;
      color: $color-bg-tertiary;
      background-color: $color-bg-secondary;
      border: $size*0.02 $color-stroke-grey solid;
      text-align: center;
      vertical-align: middle;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  > * {
    position: relative;
    -webkit-border-radius: $size;
    -moz-border-radius: $size;
    border-radius: $size;
    max-width: $size;
    max-height: $size;
    border: $stroke-width $color-stroke-grey solid;
  }
}