/* Mixins */

@mixin entry() {
    p, ul, ol, li {
        &:last-child {
            margin-bottom: 0;
        }
    }
}

@mixin focusOutline($offset: $outlineOffset) {
	&:focus-visible {
		outline: 2px solid $outline;
		outline-offset: $outlineOffset;
	}
}


@mixin close($width: 1rem, $height: 1px, $color: $baseFontColor) {
    position: relative;
    display: inline-block;

    &:before, &:after {
        content: "";
        display: block;
        width: $width;
        height: $height;
        background: $color;
        transform-origin: center center;
        transition: transform $transitionSpeedTiming;
    }

    &:before {
        transform: rotate(0);
    }
    &:after {
        transform: rotate(90deg);
    }

    &--active {
        &:before {
            transform: rotate(45deg);
        }
        &:after {
            transform: rotate(-45deg);
        }
    }
}

@mixin underline(
    $color,
    $bottomPadding: 0.05em,
    $opacity: 1,
    $direction: left
) {
    position: relative;
    padding-bottom: $bottomPadding;

    &:after {
        content: "";
        display: block;
        width: 100%;
        height: 1px;
        background: $color;
        position: absolute;
        bottom: 0;
        left: 0;
        opacity: $opacity;
        transition: transform 0.1s ease-out;
        transform-origin: $direction center;
    }

    &:hover,
    &:active,
    &:focus {
        &:after {
            transform: scaleX(0);
        }
    }
}

@mixin bgImageWrapper() {
    display: block;
    position: relative;
    overflow: hidden;
}

@mixin bgImage() {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}

@mixin bgImageCenterTop() {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

@mixin bgImageCenter() {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

@mixin boxShadowHover() {
    box-shadow: 0px 13px 18px 0px rgba($blue, 0.15),
        0px 4px 7px 0px rgba($blue, 0.15);
    &:hover,
    &:active {
        box-shadow: 0px 13px 18px 0px rgba($blue, 0.2),
            0px 4px 7px 0px rgba($blue, 0.2);
    }
}

@mixin triangleTop($width, $height, $color) {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 #{$width/2} #{$height} #{$width/2};
    border-color: transparent transparent $color transparent;
    position: absolute;
}

@mixin triangleRight($width, $height, $color) {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: #{$height/2} 0 #{$height/2} #{$width};
    border-color: transparent transparent transparent $color;
    position: absolute;
}

@mixin triangleBottom($width, $height, $color) {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: #{$height} #{$width/2} 0 #{$width/2};
    border-color: $color transparent transparent transparent;
    position: absolute;
}

@mixin triangleLeft($width, $height, $color) {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: #{$height/2} #{$width} #{$height/2} 0;
    border-color: transparent $color transparent transparent;
    position: absolute;
}
