text: ///
  /// This file regroups the odoo mixins. They are available in every asset bundle.
  ///
  
  // ------------------------------------------------------------------
  // Caret
  // ------------------------------------------------------------------
  @mixin utils-caret-boilerplate {
      content: "";
      display: inline-block;
      width: 0;
      height: 0;
      vertical-align: middle;
  }
  
  // ------------------------------------------------------------------
  // Position absolute
  // ------------------------------------------------------------------
  @mixin o-position-absolute($top: auto, $right: auto, $bottom: auto, $left: auto) {
      position: absolute;
      top: $top;
      left: $left;
      bottom: $bottom;
      right: $right;
  }
  
  // ------------------------------------------------------------------
  // Position sticky
  // ------------------------------------------------------------------
  @mixin o-position-sticky($top: auto, $right: auto, $bottom: auto, $left: auto) {
      position: -webkit-sticky;
      position: sticky;
      top: $top;
      left: $left;
      bottom: $bottom;
      right: $right;
  }
  
  // ------------------------------------------------------------------
  // Text overflow
  // ------------------------------------------------------------------
  @mixin o-text-overflow($display: inline-block, $max-width: 100%) {
      display: $display;
      max-width: $max-width;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      vertical-align: top; // To update display context changed by overflow:hidden
  }
  
  // ------------------------------------------------------------------
  // Hovering effects
  // ------------------------------------------------------------------
  @mixin o-hover-opacity($default-opacity: 0.5, $hover-opacity: 1) {
      opacity: $default-opacity;
  
      &:hover, &:focus, &.focus {
          opacity: $hover-opacity;
      }
  }
  
  //------------------------------------------------------------------------------
  // Colors
  //------------------------------------------------------------------------------
  
  @function luma($color) {
      @return ((red($color) * .299) + (green($color) * .587) + (blue($color) * .114)) / 255 * 100%;
  }
  //
  // Given two colors, returns the one which has the most constrast with another
  // given color. Careful: if you want to find the text color which will suit the
  // most on a given background color, you should use the 'color-yiq' function.
  //
  @function o-get-most-contrast($color, $c1, $c2, $background: #FFFFFF, $threshold: false, $cross-mix: true) {
      $background: if($background == null, #FFFFFF, $background);
  
      $real-color: mix(rgba($color, 1.0), $background, percentage(alpha($color)));
      $luma: luma($real-color);
  
      $cross-color: if($cross-mix, $real-color, $background);
  
      $real-c1: mix(rgba($c1, 1.0), $cross-color, percentage(alpha($c1)));
      $luma-c1: luma($real-c1);
  
      $real-c2: mix(rgba($c2, 1.0), $cross-color, percentage(alpha($c2)));
      $luma-c2: luma($real-c2);
  
      $-dark: if($luma-c1 <= $luma-c2, $c1, $c2);
      $-light: if($luma-c1 > $luma-c2, $c1, $c2);
  
      @if $threshold == false {
          // Automatic threshold: give a really small preference to light results
          // as bootstrap does by default (mainly by compatibility at the moment
          // this code is written)
          $threshold: ($luma-c1 + $luma-c2) * 0.515; // 150 / 145.63 * 0.5 would be the BS value
      }
  
      @return if($luma > $threshold, $-dark, $-light);
  }
  
  // ------------------------------------------------------------------
  // Padding
  // ------------------------------------------------------------------
  @mixin o-webclient-padding($top: 0px, $right: $o-horizontal-padding, $bottom: 0px, $left: $o-horizontal-padding) {
      padding-top: $top;
      padding-right: $right;
      padding-bottom: $bottom;
      padding-left: $left;
  }
  
  // ------------------------------------------------------------------
  // Caret
  // ------------------------------------------------------------------
  @mixin o-caret-down($caret-width: $caret-width) {
      @include utils-caret-boilerplate;
      border-bottom: 0;
      border-left: $caret-width solid transparent;
      border-right: $caret-width solid transparent;
      border-top: $caret-width solid;
      -moz-transform: scale(0.9999); // Smooth the caret on firefox
  }
  @mixin o-caret-up($caret-width: $caret-width) {
      @include utils-caret-boilerplate;
      border-bottom: $caret-width solid;
      border-left: $caret-width solid transparent;
      border-right: $caret-width solid transparent;
      border-top: 0;
      -moz-transform: scale(0.9999); // Smooth the caret on firefox
  }
  @mixin o-caret-left($caret-width: $caret-width) {
      @include utils-caret-boilerplate;
      border-bottom: $caret-width solid transparent;
      border-left: 0;
      border-right: $caret-width solid;
      border-top: $caret-width solid transparent;
      -moz-transform: scale(0.9999); // Smooth the caret on firefox
  }
  @mixin o-caret-right($caret-width: $caret-width) {
      @include utils-caret-boilerplate;
      border-bottom: $caret-width solid transparent;
      border-left: $caret-width solid;
      border-right: 0;
      border-top: $caret-width solid transparent;
      -moz-transform: scale(0.9999); // Smooth the caret on firefox
  }
  
  // ------------------------------------------------------------------
  // Hovering effects
  // ------------------------------------------------------------------
  @mixin o-hover-text-color($default-color: $body-color, $hover-color: $link-color) {
      color: $default-color;
  
      &:hover, &:focus, &.focus {
          color: $hover-color;
      }
  }
  
  // ------------------------------------------------------------------
  // Mixin to define variations for btn-links and muted btn-links
  // ------------------------------------------------------------------
  @mixin o-btn-link-variant($color, $color-active) {
      text-transform: none;
      @include o-hover-text-color($default-color: $color, $hover-color: $color-active);
  
      &, &:hover, &:focus, &:active, &.active {
          border-color: transparent;
          background-color: transparent;
      }
  
      &.text-muted, .text-muted {
          @include o-hover-opacity;
          @include o-hover-text-color($default-color: $text-muted, $hover-color: $color-active);
      }
  }
  
  // Odoo defines a limited Noto font-family for a small variety of unicode
  // characters that are not necessary defined in the user system or even defined
  // but not properly readable. This function allows to add this font family in a
  // given font list.
  //
  // @param {list} $font - a list of font names ending with the generic one.
  // @param {integer} [$index] - the position where to add the support font, if
  //        not given, it will be placed before the generic one.
  @function o-add-unicode-support-font($font, $index: false) {
      @if $index == false {
          $index: length($font);
      }
  
      $-with-support-font: ();
      @for $i from 1 through length($font) {
          @if $i == $index {
              $-with-support-font: append($-with-support-font, 'Odoo Unicode Support Noto', $separator: comma);
          }
          $-with-support-font: append($-with-support-font, nth($font, $i), $separator: comma);
      }
  
      @return $-with-support-font;
  }
  
  // Mixin which allows to extend the BS4 bg-variant mixin
  @mixin o-bg-color-extension($color, $text-color, $with-muted) {}
  
  // Function to remove all null values of a map
  @function o-map-omit($map) {
      $-map: ();
      @each $key, $value in $map {
          @if $value != null {
              $-map: map-merge($-map, (
                  $key: $value,
              ));
          }
      }
      @return $-map;
  }
  
  // Function to swap two values in a list
  @function o-swap($list, $i, $j) {
      $tmp: nth($list, $i);
      $list: set-nth($list, $i, nth($list, $j));
      @return set-nth($list, $j, $tmp);
  }
  
  // ------- Kanban grouped mixins -------
  @mixin o-kanban-icon($base-opacity: 0.5) {
      display: block;
      text-align: center;
      color: $o-main-text-color;
      font-size: $font-size-sm;
      cursor: pointer;
      @include o-hover-opacity($base-opacity);
  }
  @mixin o-kanban-tag-color {
      @for $size from 1 through length($o-colors) {
          // Note: the first color is supposed to be invisible if there is a color
          // field but it is used as a default color when there is no color field
          &.o_tag_color_#{$size - 1} span {
              background-color: nth($o-colors, $size);
          }
      }
  }
  @mixin o-kanban-record-color {
      @for $size from 2 through length($o-colors) {
          // Note: the first color is not defined as it is the 'no color' for kanban
          .oe_kanban_color_#{$size - 1}::after {
              background-color: nth($o-colors, $size);
          }
      }
  }
  @mixin o-kanban-slim-col {
      position: relative;
      flex: 0 0 auto;
      margin: 0;
      padding: 0 floor($o-kanban-group-padding * 0.7);
      cursor: pointer;
  }
  @mixin o-kanban-header-title {
      display: flex;
      align-items: center;
      height: $o-kanban-header-title-height;
      line-height: 2.2;
      color: $headings-color;
  }
  @mixin o-kanban-v-title {
      @include o-position-absolute($o-kanban-inside-vgutter * 2, $left: floor(-$o-kanban-inside-vgutter * 1.2));
      transform-origin: left bottom 0;
      transform: rotate(90deg);
      overflow: visible;
      white-space: nowrap;
      font-size: 15px;
  }
  
  // ------- Kanban records mixins -------
  @mixin o-kanban-record-title($font-size) {
      color: $headings-color;
      font-size: $font-size;
      font-weight: 500;
      margin-bottom: 0;
      margin-top: 0;
  }
  @mixin o-kanban-dropdown($padding-base: $o-kanban-inside-vgutter) {
      padding: $padding-base/2 $padding-base;
      border: none;
      border-left: 1px solid transparent;
      vertical-align: top;
      color: $body-color;
  
      &:hover {
          color: $headings-color;
      }
      &:focus, &:active, &:focus:active {
          outline: none;
      }
  }
  @mixin o-kanban-dropdown-open {
      position: relative;
      background: white;
      border-color: gray('400');
      z-index: $zindex-dropdown + 1;
  }
  @mixin o-kanban-dropdown-menu {
      @include o-position-absolute($right: -1px);
      margin-top: -1px;
      border-color: gray('400');
  }
  @mixin o-kanban-colorpicker {
      max-width: 150px;
      padding: 3px ($o-dropdown-hpadding - $o-kanban-inner-hmargin) 3px $o-dropdown-hpadding;
  
      > li {
          display: inline-block;
          margin: $o-kanban-inner-hmargin $o-kanban-inner-hmargin 0 0;
          border: 1px solid white;
          box-shadow: 0 0 0 1px gray('300');
  
          > a {
              display: block;
  
              &::after {
                  content: "";
                  display: block;
                  width: 20px;
                  height: 15px;
              }
          }
  
          // No Color
          &:first-child > a {
              position: relative;
              &::before {
                  content: "";
                  @include o-position-absolute(-2px, $left: 10px);
                  display: block;
                  width: 1px;
                  height: 20px;
                  transform: rotate(45deg);
                  background-color: red;
              }
              &::after {
                  background-color: white;
              }
          }
      }
  }
  
  // Emulate dropdown links
  @mixin o-kanban-dashboard-dropdown-link($link-padding-gap: $o-dropdown-hpadding) {
      padding: 0;
  
      > a {
          margin: auto auto auto (-$link-padding-gap);
          padding: 3px $link-padding-gap;
          color: $body-color;
          display: block;
  
          &:hover {
              background-color: gray('300');
              color: $headings-color;
          }
      }
      &:last-child {
          margin-bottom: 5px;
      }
  }
  
  // No content helper
  @mixin o-nocontent-empty {
      pointer-events: auto;
      max-width: 650px;
      margin: auto;
      padding: 15px;
      z-index: 1000;
      text-align: center;
      color: $o-tooltip-text-color;
      font-size: 115%;
  
      > p:first-of-type {
          margin-top: 0;
          color: $o-tooltip-title-text-color;
          font-weight: bold;
          font-size: 125%;
      }
  
      a {
          cursor: pointer;
      }
  }
  
  %o-nocontent-init-image {
      content: "";
      display: block;
      margin: auto;
      background-size: cover;
  }
  
  %o-nocontent-empty-document {
      @extend %o-nocontent-init-image;
      @include size(120px, 80px);
      margin-top: 30px;
      margin-bottom: 30px;
      background: transparent url(/web/static/src/img/empty_folder.svg) no-repeat center;
  }
  