////
/// @group Utilidades
////

/// Crea una propiedad con prefijos de navegador, cuando no es
/// soportada por estándares, por ejemplo el guionado de texto.
@mixin vendor-prefix($property, $definition...) {
  @each $prefix in $vendor-prefixes {
    #{$prefix}#{$property}: $definition;
  }
}

/// Los recursos que cargan a demanda muestran el espacio que ocupan.
[loading="lazy"] {
  background: linear-gradient(215deg, #{$white} 0%, #{$primary} 100%);
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
/// Obtiene el sufijo para cada clase responsive usando mixins de
/// Bootstrap.  Valores posibles:
/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
/// `-md`, `-lg`, `-xl`.
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

/// Z-Indexes según Bootstrap
    .z-index#{$infix}-dropdown { z-index: $zindex-dropdown !important; }
    .z-index#{$infix}-sticky { z-index: $zindex-sticky !important; }
    .z-index#{$infix}-fixed { z-index: $zindex-fixed !important; }
    .z-index#{$infix}-backdrop { z-index: $zindex-modal-backdrop !important; }
    .z-index#{$infix}-modal { z-index: $zindex-modal !important; }
    .z-index#{$infix}-popover { z-index: $zindex-popover !important; }
    .z-index#{$infix}-tooltip { z-index: $zindex-tooltip !important; }

/// Guionado, complemento para .text-justify
    @each $hyphen in $hyphens {
      .hyphens#{$infix}-#{$hyphen} {
        hyphens: $hyphen;
      }
    }

/// Grilla en CSS, soporta armar una cantidad de columnas, indicar las
/// columnas que ocupan los elementos descendientes e incluso
/// solapamiento.
///
/// @example html
///   <div class="d-grid grid-cols-5">
///     <div class="grid-row-1 grid-col-1-to-2"></div>
///     <div class="grid-row-2 grid-col-2-to-3"></div>
///   </div>
    .d#{$infix}-grid {
      display: grid !important;

      @each $spacer, $_ in $spacers {
        &.grid-cols#{$infix}-#{$spacer} {
          grid-template-columns: repeat($spacer, 1fr) !important;
        }

        & > .grid-row#{$infix}-#{$spacer} {
          grid-row: $spacer !important;
        }

        & > .grid-col#{$infix}-#{$spacer} {
          grid-column: $spacer !important;
        }

        @each $spacer_to, $_ in $spacers {
          & > .grid-col#{$infix}-#{$spacer}-to-#{$spacer_to} {
            grid-column: #{$spacer} / #{$spacer_to} !important;
          }
        }
      }
    }

/// Ocultar la barra de scroll, útil para sliders horizontales.
///
/// @example html
///   <div class="no-scrollbar-md"></div>
    .no-scrollbar#{$infix} {
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;

      &::-webkit-scrollbar { display: none; }
    }

    :enabled {
      .show-when-disabled#{$infix} {
        display: none !important;
      }
    }

    :disabled {
      .hide-when-disabled#{$infix} {
        display: none !important;
      }
    }

/// Asigna decoración al texto, pudiendo combinarlas!
    @each $text-decoration in $text-decoration-lines {
      .text-decoration#{$infix}-#{$text-decoration} {
        text-decoration-line: $text-decoration !important;
      }

      @each $text-decoration-2 in $text-decoration-lines {
        .text-decoration#{$infix}-#{$text-decoration}-#{$text-decoration-2} {
          text-decoration-line: $text-decoration $text-decoration-2 !important;
        }
      }
    }

    @each $text-decoration in $text-decoration-styles {
      .text-decoration#{$infix}-#{$text-decoration} {
        text-decoration-style: $text-decoration !important;
      }
    }

/// Cursores
    @each $cursor in $cursors {
/// El elemento va a tener un cursor
///
/// @example html
///   <div class="cursor-pointer"></div>
      .cursor#{$infix}-#{$cursor} {
        cursor: $cursor !important;
      }
    }

/// Eventos del cursor
    @each $event in $events {
/// Habilita o deshabilita recibir eventos al tocar o clickear.
///
/// @example html
///   <div class="pointer-event-none"></div>
      .pointer-event#{$infix}-#{$event} {
        pointer-events: $event;
      }
    }

/// Agrega una transición a cualquier modificación de atributos
    .transition#{$infix} {
      @include transition($transition-base);
    }

/// Valores posibles para la propiedad `object-fit`
    @each $object in $objects {
/// Ajustes de imagen y video con respecto al contenedor
///
/// @example html
///   <img class="object-cover object-lg-contain"/>
      .fit#{$infix}-#{$object} {
        object-fit: #{$object};
      }
    }

/// _Overflow_, qué hacer cuando el contenido sobrepasa los límites del
/// contenedor.
/// También puede ser solo dentro de un eje
    @each $overflow in $overflows {
/// Manejar el contenido sobre cualquier eje
///
/// @example html
///   <div class="overflow-hidden overflow-scroll-md"></div>
      .overflow#{$infix}-#{$overflow} {
        overflow: $overflow !important;
      }

      @each $axis in $overflow-axis {
/// Manejar el contenido sobre un eje particular
///
/// @example html
///   <div class="overflow-hidden-y overflow-scroll-x"></div>
        .overflow-#{$axis}#{$infix}-#{$overflow} {
          overflow-#{$axis}: $overflow !important;
        }
      }
    }

    @each $spacer, $length in $spacers {
/// Border radius
///
/// @example html
///   <h1 class="f-3"></h1>
      .f#{$infix}-#{$spacer} {
        font-size: $length !important;

        &,
        & p,
        & li {
          min-height: #{$length * $line-height-base};
        }
      }

///   <div class="rounded-3"></div>
      .rounded#{$infix}-#{$spacer} {
        border-radius: $length !important;
      }

/// Columnas de texto
///
/// @example html
///   <div class="text-column-1 text-column-md-3"></div>
      .text-column#{$infix}-#{$spacer} {
        column-count: $spacer;
      }

/// Limitar la cantidad de líneas de un bloque de texto,
/// reemplazando el sobrante por puntos suspensivos.  Es útil cuando
/// el diseño solo pide una cantidad de líneas pero no sabemos cuál
/// va a ser el largo.
///
/// @example html
///   <h1 class="line-clamp-1"></h1>
      .line-clamp#{$infix}-#{$spacer} {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: $spacer;
        -webkit-box-orient: vertical;
      }

      @each $direction in $directions {
/// Ubicación absoluta, usar con position-*
///
/// @example html
///   <div class="position-absolute top-0 left-3"></div>
        .#{$direction}#{$infix}-#{$spacer} {
          #{$direction}: $length
        }
      }
    }

    /// Anchos y altos en base a `$sizes` definido por Bootstrap.  Para
    /// personalizar los tamaños, modificarlos o agregarlos en `styles.scss`
    ///
    /// @link assets/css/styles.scss
    @each $prop, $abbrev in (width: w, height: h) {
      @each $size, $length in $sizes {
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
        .min-#{$abbrev}#{$infix}-#{$size} { min-#{$prop}: $length !important; }
        .max-#{$abbrev}#{$infix}-#{$size} { max-#{$prop}: $length !important; }
      }
    }

/// Tipos de _scroll_ posible
    @each $scroll in $scrolls {
/// Poder modificar el tipo de _scroll_ de forma _responsive_
///
/// @example html
///   <div class="scroll-auto scroll-md-smooth"></div>
      .scroll#{$infix}-#{$scroll} {
        scroll-behavior: #{$scroll};
      }
    }

/// Bordes.  Bootstrap no define bordes _responsive_
///
/// @link node_modules/bootstrap/scss/utilities/_borders.scss
/// @example html
///   <div class="border border-md-top-0 border-3"></div>
    .border#{$infix}   { border: $border-width solid $border-color !important; }
    .border#{$infix}-0 { border: 0 !important; }

    @each $direction in $directions {
      .border#{$infix}-#{$direction}   { border-#{$direction}: $border-width solid $border-color !important; }
      .border#{$infix}-#{$direction}-0 { border-#{$direction}: 0 !important; }
    }

    @each $border-width, $length in $border-widths {
      .border#{$infix}-#{$border-width}   { border-width: $length !important; }
    }

    @each $align in $aligns {
/// Alineación _responsive_
///
/// @example html
///   <div class="text-center text-md-right"></div>
      .text#{$infix}-#{$align} { text-align: $align !important; }
    }

    @each $position in $positions {
/// Posicionamiento
///
/// @example html
///   <div class="position-relative position-md-absolute"></div>
      .position#{$infix}-#{$position} { position: $position !important; }
    }

    @each $color, $rgb in $colors {
/// Colores de fondo.  Es raro que usemos versiones _responsive_, pero
/// no está de más tenerlas.
///
/// @link assets/css/styles.scss
/// @example html
///   <div class="background-red"></div>
      .background#{$infix}-#{$color} {
        background-color: var(--#{$color});

        &:focus {
          background-color: var(--#{$color});
        }
      }

/// Color de la decoración del texto
      .text-decoration#{$infix}-#{$color} {
        text-decoration-color: $rgb !important;
      }

      @each $opacity, $degree in $opacities {
        .o#{$infix}-#{$opacity} {
          opacity: calc(#{$degree} + 100%) !important;
        }

        .hover-o#{$infix}-#{$opacity} {
          &:hover,
          &:focus,
          &:active {
            opacity: calc(#{$degree} + 100%) !important;
          }
        }

/// Color de fondo con transparencia (opacidad)
///
/// @example html
///   <div class="background-red-t2"></div>
        .background#{$infix}-#{$color}-t#{$opacity} {
          background-color: scale-color($rgb, $alpha: $degree);
        }

        .hover-background#{$infix}-#{$color}-t#{$opacity} {
          &:hover,
          &:focus,
          &:active {
            background-color: scale-color($rgb, $alpha: $degree);
          }
        }
      }

/// Atributos de SVG
      @each $attr in $svg-attributes {
/// Poder cambiar el relleno o la línea de un SVG
///
/// @example html
///   <div class="stroke-black fill-red">
///     <svg/>
///   </div>
        .#{$attr}#{$infix}-#{$color} {
          svg {
            * {
              #{$attr}: var(--#{$color});
            }
          }
        }
      }

/// Barras de _scroll_ de colores
///
/// @example html
///   <div class="scrollbar-green"></div>
      .scrollbar#{$infix}-#{$color} {
        scrollbar-color: var(--#{$color}) transparent;
        scrollbar-width: thin;

        &::-webkit-scrollbar {
          width: 5px;
          height: 8px;
          background-color: transparent;
        }

        &::-webkit-scrollbar-thumb {
          background: var(--#{$color});
        }
      }

/// Bordes de color
///
/// @example html
///   <div class="border-red"></div>
      .border#{$infix}-#{$color} {
        border-color: var(--#{$color}) !important;
      }

/// Cambiar el fondo al pasar por encima o hacer foco
///
/// @example html
///   <div class="background-black background-hover-red"></div>
      .background-hover#{$infix}-#{$color} {
        &:hover,
        &:focus-within {
          background-color: var(--#{$color});
        }
      }

/// Cambiar el color al pasar por encima o hacer foco
///
/// @example html
///   <div class="black hover-red"></div>
      .hover-#{$color} {
        &:hover,
        &:focus-within {
          color: var(--#{$color}) !important;
        }
      }

/// Oscurecer un link al pasarle por encima con el cursor, en base a su color original
///
/// @example html
///   <div class="pink"></div>
      a.#{$color}#{$infix}:hover {
        color: darken($rgb, 15%);
      }

/// Cambiar el color, también aplica a la selección de texto.
///
/// @example html
///   <div class="black hover-red"></div>
      .#{$color}#{$infix} {
        color: var(--#{$color});

        &:focus {
          color: var(--#{$color});
        }

/// Invertir el color en la selección, con el mismo color de fondo y
/// texto en blanco.
        ::-moz-selection,
        ::selection {
          background: var(--#{$color});
          color: white;
        }

/// Si el contenedor tiene un color, también aplica a los bordes de los
/// elementos de un formulario.
///
/// @todo Evaluar si es realmente necesario hacerlo así, porque no
/// aplica a las sombras.
        .form-control {
          border-color: var(--#{$color});
          color: var(--#{$color});
        }

/// Los `<hr/>` también cambian de color.
///
/// @example html
///   <div class="red">
///     <hr/>
///   </div>
        hr {
          border-color: var(--#{$color});
        }
      }
    }

    /// Espacio entre caracteres
    ///
    /// @example html
    ///   <div class="letter-spacing-2"></div>
    @each $letter-spacing, $value in $letter-spacings {
      .letter-spacing#{$infix}-#{$letter-spacing} {
        letter-spacing: $value !important;
      }
    }

    .lead#{$infix} {
      font-size: $lead-font-size !important;
    }

    .display#{$infix}-1 {
      font-size: $display1-size !important;
    }

    .display#{$infix}-2 {
      font-size: $display2-size !important;
    }

    .display#{$infix}-3 {
      font-size: $display3-size !important;
    }

    .display#{$infix}-4 {
      font-size: $display4-size !important;
    }

    @each $font-size, $value in $font-sizes {
      .f#{$infix}-#{$font-size} {
        font-size: $font-size-base * $value !important;
      }
    }

    @each $transform-scale, $value in $transform-scales {
      .transform-scale#{$infix}-#{$transform-scale} {
        transform: scale($value) !important;
      }

      .transform-scale-hover#{$infix}-#{$transform-scale} {
        &:hover, &:focus {
          transform: scale($value) !important;
        }
      }
    }

    @each $background-size, $value in $background-sizes {
      /// Tamaño de imagen de fondo
      ///
      /// @example html
      ///   <div class="background-size-md-cover"></div>
      .background-size#{$infix}-#{$background-size} {
        background-size: $value !important;
      }
    }

    @each $x in $background-positions-x {
      @each $y in $background-positions-y {
        .background-position#{$infix}-#{$x}-#{$y} {
          background-position: $x $y;
        }
      }
    }

    @each $background-image, $value in $background-images {
      .background-image#{$infix}-#{$background-image} {
        background-image: url("#{$value}");
      }
    }
  }
}