@use 'sass:map';
@use 'variables' as *;
// for media-breakpoint-up and media-breakpoint-down
@import 'bootstrap/scss/mixins/breakpoints';

/**
 * @sass-export-section="Common"
 */

@mixin clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    content: ' ';
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin default-border-radius() {
  @include border-radius($border-radius);
}

@mixin border-radius($radius) {
  border-radius: $radius;
  background-clip: padding-box; /* stops bg color from leaking outside the border: */
}

@mixin word-wrap() {
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

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

// Mixin for no select highlight
@mixin no-select() {
  -ms-user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

//@end-sass-export-section

/**
 * @sass-export-section="Flexbox"
 */

@mixin flexbox {
  display: flex;
}

%flexbox {
  @include flexbox;
}

@mixin inline-flex {
  display: inline-flex;
}

%inline-flex {
  @include inline-flex;
}

@mixin flex-direction($value: row) {
  @if $value == row-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
  } @else if $value == column {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
  } @else if $value == column-reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
  } @else {
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
  }
  flex-direction: $value;
}
// Shorter version:
@mixin flex-dir($args...) {
  @include flex-direction($args...);
}

//----------------------------------------------------------------------

// Flexbox Flow (shorthand)
//
// The 'flex-flow' property is a shorthand for setting the 'flex-direction'
// and 'flex-wrap' properties, which together define the flex container's
// main and cross axes.
//
// Values: <flex-direction> | <flex-wrap>
// Default: row nowrap
//
// http://w3.org/tr/css3-flexbox/#flex-flow-property

@mixin flex-flow(
  $values: (
    row nowrap,
  )
) {
  flex-flow: $values;
}

//----------------------------------------------------------------------

// Flexbox Order
//
// The 'order' property controls the order in which flex items appear within
// their flex container, by assigning them to ordinal groups.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#order-property

@mixin order($int: 0) {
  order: $int;
}

//----------------------------------------------------------------------

// Flexbox Grow
//
// The 'flex-grow' property sets the flex grow factor. Negative numbers
// are invalid.
//
// Default: 0
//
// http://w3.org/tr/css3-flexbox/#flex-grow-property

@mixin flex-grow($int: 0) {
  flex-grow: $int;
}

//----------------------------------------------------------------------

// Flexbox Shrink
//
// The 'flex-shrink' property sets the flex shrink factor. Negative numbers
// are invalid.
//
// Default: 1
//
// http://w3.org/tr/css3-flexbox/#flex-shrink-property

@mixin flex-shrink($int: 1) {
  flex-shrink: $int;
}

//----------------------------------------------------------------------

// Flexbox "Flex" (shorthand)
//
// The 'flex' property specifies the components of a flexible length: the
// flex grow factor and flex shrink factor, and the flex basis. When an
// element is a flex item, 'flex' is consulted instead of the main size
// property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect.
//
// Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: See individual properties (1 1 0).
//
// http://w3.org/tr/css3-flexbox/#flex-property

@mixin flex($fg: 1, $fs: null, $fb: null) {
  flex: $fg $fs $fb;
}

//@end-sass-export-section

/*
Modifier themes
*/
@mixin background-and-text-color(
  $name,
  $text-color,
  $background-color: null,
  $link-text-color: null
) {
  //color for text and background color
  #{$name} {
    @if $background-color {
      background-color: $background-color !important;
    }

    @if $text-color {
      color: $text-color !important;

      @if $link-text-color {
        > a:not(.o-button):not(.o-round-button) {
          color: $link-text-color;

          &:hover {
            color: darken($link-text-color, 10);
            text-decoration: none;
          }
        }
      } @else {
        > a:not(.o-button):not(.o-round-button) {
          color: $text-color;

          &:hover {
            color: darken($text-color, 10);
            text-decoration: none;
          }
        }
      }
    }
  }
}

@mixin button-background(
  $name,
  $background-color,
  $color,
  $invertOnHover,
  $lighten: false
) {
  &--#{$name} {
    @if $background-color {
      background-color: $background-color;
      border-color: $background-color;
    }
    color: $color;

    &:active {
      border-color: darken($background-color, 10);
      background-color: lighten($background-color, 10);
      color: $color;
    }

    &:focus {
      outline: 1px auto $color !important;
    }

    &:hover {
      @if $invertOnHover {
        background-color: $color;
        color: $background-color;
      } @else {
        background-color: darken($background-color, 10);
        border-color: darken($background-color, 10);
        color: $color;
      }

      @if $lighten {
        background-color: lighten($background-color, 10);
        filter: grayscale(1);

        border-color: lighten($background-color, 10);
      }
    }
  }
}

@mixin min-heights($prefix) {
  #{$prefix}min-height-pixels-200 {
    min-height: 200px;
  }

  #{$prefix}min-height-pixels-300 {
    min-height: 300px;
  }

  #{$prefix}min-height-pixels-400 {
    min-height: 400px;
  }

  #{$prefix}min-height-pixels-500 {
    min-height: 500px;
  }

  #{$prefix}min-height-percent-25 {
    min-height: 25%;
  }

  #{$prefix}min-height-percent-50 {
    min-height: 50%;
  }

  #{$prefix}min-height-percent-75 {
    min-height: 75%;
  }

  #{$prefix}min-height-percent-100 {
    min-height: 100%;
  }
}

@mixin vertical-aligns() {
  &--vertical-align-center {
    align-self: center;
  }

  &--vertical-align-bottom {
    margin-top: auto;
    align-self: flex-end;
  }
}

@mixin unity-symbols($name, $size: 1rem) {
  // find the icon in the map, if not found, use the incoming value as default
  content: if(map-has-key($icons, $name), map.get($icons, $name), $name);
  font-size: $size;
  font-family: 'unity symbols';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
}

@mixin border-bottom($color: $sodra-black, $border-size: 2px) {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -($spacer-1);
  border-bottom: $border-size solid $color;
}

/*
Browser support
*/
@mixin browser-edge {
  @supports (-ms-user-select: none) {
    @content;
  }
}

@mixin browser-ie11 {
  @media (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content;
  }
}