@use "variables" as *;

@mixin mobile-down() {
    @media (max-width: $screen-xs-max) {
        @content;
    }
}

@mixin mobile-up() {
    @media (min-width: $screen-xs) {
        @content;
    }
}

@mixin tablet-portrait-down {
    @media (max-width: $screen-s-max) {
        @content;
    }
}

@mixin tablet-portrait-up {
    @media (min-width: $screen-s) {
        @content;
    }
}

@mixin tablet-landscape-down {
    @media (max-width: $screen-m-max) {
        @content;
    }
}

@mixin tablet-landscape-up {
    @media (min-width: $screen-m) {
        @content;
    }
}

@mixin desktop-up {
    @media (min-width: $screen-l) {
        @content;
    }
}

@mixin ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

@mixin multi-line-ellipsis($lines) {
    overflow: hidden;

    // Using `box` breaks the line-clamp behavior
    /* stylelint-disable-next-line value-no-vendor-prefix */
    display: -webkit-box;
    -webkit-line-clamp: $lines;
    -webkit-box-orient: vertical;
}

@mixin button-reset() {
    padding: 0;
    border: 0;
    outline: none;
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;

    &:disabled {
        cursor: not-allowed;
    }
}

@mixin focus-state {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 $focus-state-size $color-focus;
    transition:
        border-color ease-in-out 0.15s,
        box-shadow ease-in-out 0.15s;
}

// Make a block expand outside the story.
@mixin media-layout-expanded() {
    $block-offset: -10%;

    width: 120%;
    margin-left: $block-offset;

    @include rtl {
        margin-left: initial;
        margin-right: $block-offset;
    }

    @media (max-width: 992px) {
        @include media-layout-full-width;
    }
}

// Make a block take the full width of the screen.
@mixin media-layout-full-width() {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

@mixin rtl {
    [dir="rtl"] & {
        @content;
    }
}