_utils.sass

@function px2rem($size)
    $remSize: $size / 16
    @return #{$remSize}rem

@function pxr2rem($size)
    $remSize: $size / 16 / 2
    @return #{$remSize}rem

@mixin in-page-with-sidebar
    body:not(.full-width) &
        @content

@mixin in-page-without-sidebar
    main > .blocks &,
    body.full-width &,
        @content

// Use this mixin to override with-aside or without-aside rules
@mixin in-page-with-or-without-sidebar
    body:not(.full-width) &,
    main > .blocks &,
    body.full-width &,
        @content

// Aliases
@mixin full-page
    @include in-page-without-sidebar
        @content

@mixin not-full-page
    @include in-page-with-sidebar
        @content

@mixin in-page-program
    .programs__section &
        @content

@function half($size)
    @return calc(#{$size} / 2)

@mixin link($color: $link-color)
    color: $color
    text-decoration-color: rgba($color, 0.3)
    text-decoration-line: underline
    text-decoration-thickness: 1px
    text-underline-offset: 6px
    transition: text-decoration-color .3s ease
    &:hover
        text-decoration-color: rgba($color, 1)
        text-decoration-thickness: 1px

@mixin link-hovered-underline-only
    &:not(:hover)
        text-decoration: transparent

@mixin hover-translate-icon($pseudo: after, $distance: 10)
    &::#{$pseudo}
        transition: transform 0.55s $arrow-ease-transition
        transform: translateX(0)
    &:hover
        &::#{$pseudo}
            transform: translateX(#{px2rem($distance)})

@mixin sticky($offset-y: 0)
    position: sticky
    top: $offset-y
    @if $header-sticky-enabled
        transition: top $header-sticky-transition
        html:not(.is-scrolling-down) &
            top: calc(var(--header-height) + #{$offset-y})

// NEW UTILS
@mixin icon($icon-name: '', $pseudo-element: before, $font-size: px2rem(10), $non-breaking: false)
    &::#{$pseudo-element}
        content: map-get($icons, $icon-name)
        display: inline-block
        font-family: 'Icon'
        font-size: $font-size
        font-style: normal
        font-variant: normal
        font-weight: normal
        line-height: 1
        speak: never
        text-transform: none
        vertical-align: middle
        @if $non-breaking
            content: " #{map-get($icons, $icon-name)}"
            display: inline
        @content // TODO : important de documenter ça

@mixin container
    margin-left: auto
    margin-right: auto
    max-width: $grid-max-width
    padding-left: half($grid-gutter-sm)
    padding-right: half($grid-gutter-sm)
    width: 100%
    @include media-breakpoint-up(md)
        padding-left: $grid-gutter
        padding-right: $grid-gutter

@mixin grid($cols: 12, $breakpoint: false, $gap-y: $grid-gutter, $gap-x: $grid-gutter)
    @if $breakpoint
        @include media-breakpoint-up($breakpoint)
            display: grid
            grid-gap: $gap-y $gap-x
            grid-template-columns: repeat($cols, 1fr)
    @else
        display: grid
        grid-gap: $gap-y $gap-x
        grid-template-columns: repeat($cols, 1fr)
    @include media-breakpoint-down(md)
        grid-gap: $grid-gutter-sm

// This must be used for content inside columns
@function col($quantity, $base: 12)
    $quantity-on-base: $quantity / $base * 12
    $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} - #{$grid-gutter} )
    @return #{$width}

// This must be used for offset, outside columns
@function offset($quantity, $base: 12)
    $quantity-on-base: $quantity / $base * 12
    $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} )
    @return #{$width}

// This must be used for offset, inside columns
@function col-offset($quantity, $base: 12)
    $quantity-on-base: $quantity / $base * 12
    $width: calc( (100% + #{$grid-gutter}) / 12 * #{$quantity-on-base} + #{$grid-gutter})
    @return #{$width}

@function col-outside-container($quantity, $base: 12)
    $responsive-grid-width: Min(100vw, (#{$grid-max-width}))
    @return calc((#{$responsive-grid-width} + #{$grid-gutter} * 2) / #{$base} * #{$quantity} - #{$grid-gutter} * 2)

@mixin container-margin-left
    margin-left: Max(#{$grid-gutter}, calc(50vw - #{$grid-max-width} / 2 + #{$grid-gutter}))

@mixin stretched-link($pseudo-element: after)
    &::#{$pseudo-element}
        bottom: 0
        content: ''
        left: 0
        position: absolute
        right: 0
        top: 0
        z-index: $zindex-stretched-link

@mixin aspect-ratio($ratio, $selector: 'iframe', $background: false)
    @if $background
        aspect-ratio: #{$ratio}
        background: $background
    #{$selector}
        aspect-ratio: #{$ratio}
        display: block
        width: 100%
    @supports not (aspect-ratio: 1)
        position: relative
        &::before
            content: ''
            padding-top: (1 / $ratio) * 100%
            width: 100%
        #{$selector}
            bottom: 0
            left: 0
            position: absolute
            right: 0
            top: 0

@mixin article($background: null)
    position: relative
    display: flex
    flex-direction: column
    .media
        @if $article-media-aspect-ratio
            @include aspect-ratio($article-media-aspect-ratio, 'img', $background)
        margin-bottom: $spacing1
        order: -1
        overflow: hidden
        img
            object-fit: cover
    h1
        @include h3
    a
        @include stretched-link
        text-decoration: none
    p
        + time
            margin-top: $spacing0
    time
        @include meta
        color: $color-text-alt
        display: block

@mixin list-section
    @include list-reset
    > li
        border-bottom: 1px solid $color-border
        padding-bottom: $spacing1
        padding-top: $spacing1
        position: relative
        > .title
            @include h2
            transition: color 0.55s
            @include media-breakpoint-down(md)
                @include icon("arrow-right", "after", px2rem(16), true)
                    bottom: $spacing0
                    position: absolute
                    right: 0
            @include media-breakpoint-up(md)
                @include arrow-right-hover
                display: block
                &::after
                    font-size: $font-size-base
                    transform: translateX(0)
                    position: relative
                &:hover
                    &::after
                        transform: translateX($spacing0)
        a
            text-decoration: none
            &:hover
                color: $color-accent

        @include media-breakpoint-down(md)
            a, p
                display: block
        @include media-breakpoint-up(md)
            align-items: baseline
            display: flex
            justify-content: space-between
            

@mixin visually-hidden
    clip: rect(0,0,0,0) !important
    border: 0 !important
    height: 1px !important
    margin: -1px !important
    overflow: hidden !important
    padding: 0 !important
    position: absolute !important
    white-space: nowrap !important
    width: 1px !important

@mixin button-reset
    appearance: none
    background: transparent
    border: none
    border-radius: none
    cursor: pointer
    user-select: none
    &:active,
    &:focus
        box-shadow: 0 0 0 0.25rem rgba($color-text, 0.25)
        // TODO : vérifier si l'outline 0 est vraiment nécessaire
        // outline: 0

@mixin list-reset
    list-style: none
    padding-left: 0
    margin-bottom: 0
    margin-top: 0

@mixin inset($top: 0, $right: $top, $bottom: $top, $left: $top)
    inset: $top $right $bottom $left
    // polyfill for inset
    @supports not (inset: $top)
        bottom: $bottom
        left: $left
        right: $right
        top: $top

@function color-contrast($color, $amount)
    @if lightness($color) > 50%
        $amount: $amount * -1
    @return scale-color($color, $lightness: $amount)

@mixin button-icon($icon: false)
    @include button-reset
    line-height: $line-height-base
    border: 1px solid $hero-color
    padding: $spacing0 $spacing1
    white-space: nowrap
    @if $icon
        @include icon($icon, after)
            font-size: px2rem(20) 
            margin-left: px2rem(10)

@mixin text-underline
    text-decoration-color: $color-border
    text-decoration-line: underline
    text-decoration-thickness: 1px
    text-underline-offset: 3px
    text-decoration-line: underline


@mixin arrow-right-hover
    position: relative
    display: flex
    justify-content: space-between
    align-items: center
    @include icon("arrow-right", after,  $small-size)
        opacity: 0
        transform: translateX(-20px)
        transition: 0.55s $arrow-ease-transition
        position: absolute
        right: 0
    &:hover
        &:after
            opacity: 1
            transform: translateX(0)

@mixin top-flex
    @include media-breakpoint-up(md)
        @include in-page-without-sidebar
            display: flex
            h2, h3
                width: col(4)
            .description
                margin-top: 0
                width: col(8)
                margin-left: $grid-gutter

// https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6
@function str-replace($string, $search, $replace: "")
	$index: str-index($string, $search)
	@if $index
		@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
	@return $string
    
@mixin font-face($name, $path, $weight: 400, $style: normal, $exts: (eot woff2 woff ttf svg))
  $src: null

  $extmods: (eot:"?", svg:"#" + str-replace($name," ","_"))
  $formats: (otf: "opentype", ttf: "truetype")

  @each $ext in $exts
    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
    $src: append($src, url(quote("/assets/fonts/" + $path + "." + $extmod)) format(quote($format)), comma,)

  @font-face
    font-family: quote($name)
    font-style: $style
    font-weight: $weight
    font-display: swap
    src: $src