@use 'sass:math';
$size__full-width: 1920px;
$size__large-width: calc(1432px + 40px);
$size__desktop-width: 1124px;
$size__small-width: 992px;
$size__tablet-width: 768px;
$size__mobile-width: 480px;
$size__sticky-bar-width: 323px;
@mixin full {
    @media (max-width: $size__full-width) {
        @content;
    }
}

@mixin large {
    @media (max-width: $size__large-width) {
        @content;
    }
}

@mixin desktop {
    @media (max-width: $size__desktop-width) {
        @content;
    }
}

@mixin small {
    @media (max-width: $size__small-width) {
        @content;
    }
}

@mixin tablet {
    @media (max-width: $size__tablet-width) {
        @content;
    }
}

@mixin mobile {
    @media (max-width: $size__mobile-width) {
        @content;
    }
}

@mixin lineClaim($n: 2) {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: $n;
    -webkit-box-orient: vertical;
}

@mixin positionImage() {
    object-fit: cover;
    object-position: top;
    vertical-align: middle;
}

@function toRem($fontSize) {
    @return math.div($fontSize, 16) * 1rem;
}

@mixin linkWithArrow() {
    color: var(--color-text);
    display: flex;
    align-items: center;
    letter-spacing: -.22px;
    transition: .3s ease-in-out all;
    &:before {
        background: url("/app/themes/mp-wbpk-gutenberg/src/images/arrow-right.svg") no-repeat 0 0;
        background-size: toRem(14);
        content: '';
        display: inline-block;
        height: toRem(14);
        width: toRem(19);
        min-width: 1.8rem;
        transition: .3s ease-in-out all;
    }
    &:hover,
    &:active,
    &:focus {
        color: var(--color-text-hover);
        &:before {
            background-position: center left toRem(5);
            filter: invert(60%);
        }
    }
    @include mobile() {
        &:before {
            background-size: toRem(10);
            height: toRem(10);
            min-width: 1.25rem;
        }
    }
}

@mixin normalLink() {
    color: var(--color-text);
    display: flex;
    align-items: center;
    letter-spacing: -.22px;
    transition: .3s ease-in-out all;
    &:hover,
    &:active,
    &:focus {
        color: var(--color-text-hover);
    }
}

@mixin normalHeading {
    font-size: toRem(20);
    font-weight: 300;
    margin-bottom: toRem(40);
    @include mobile {
        margin-bottom: toRem(20);
    }
}