@use './responsive.scss' as *;
// Mixins
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin inline-flex-center {
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

@mixin flex-start {
    display: flex;
    justify-content: start;
    align-items: center;
}

@mixin flex-end {
    display: flex;
    justify-content: flex-end;
    align-content: center;
}

@mixin flex-top {
    display: flex;
    justify-content: center;
    align-items: start;
}

@mixin flex-end {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
}

@mixin flex-spaced {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@mixin flex-middle {
    display: flex;
    align-items: center;
}

@mixin middle-content {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
}

@mixin cursor {
    cursor: pointer;
}

@mixin transition {
    transition: 0.3s all ease;
}

@mixin mobile-column {
    @include mobile {
        grid-template-columns: repeat(1, 1fr);
        flex-flow: column;
    }
}

@mixin mobile-column-reverse {
    @include mobile {
        flex-flow: column-reverse;
    }
}

@mixin mobile-heading {
    @include mobile {
        flex-flow: column;
    }
}

@mixin mobile-button {
    @include mobile {
        align-self: flex-start;
    }
}

@mixin hide-mobile {
    @include mobile {
        display: none;
    }
}

@mixin hide-tablet {
    @include tablet {
        display: none;
    }
}

@mixin animation-shake {
    animation-name: shake;
    animation-duration: 0.8s;
    animation-iteration-count: 1;
}

@mixin mobile-visible {
    @include mobile {
        display: inline-block;
    }
}

@mixin tablet-visible {
    @include tablet {
        display: inline-block;
    }
}

@mixin mobile-flex-center {
    @include mobile {
        @include flex-center;
    }
}

@mixin tablet-flex-center {
    @include tablet {
        @include flex-center;
    }
}

@mixin bg-cover {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@mixin margin-center {
    margin-left: auto;
    margin-right: auto;
}

@mixin grid-column($count: 1) {
    grid-template-columns: repeat($count, 1fr);
}

@mixin grid($column: 3, $gap: 20) {
    display: grid;
    gap: #{$gap}px;
    @include grid-column($column);
}

@mixin mobile-grid($column: 1, $gap: 20) {
    @include mobile {
        @include grid($column, $gap);
    }
}

@mixin tablet-grid($column: 2, $gap: 20) {
    @include tablet {
        @include grid($column, $gap);
    }
}

@mixin mobile-text-size($size: 12) {
    @include mobile {
        font-size: #{$size}px;
    }
}

@mixin tablet-text-size($size: 12) {
    @include tablet {
        font-size: #{$size}px;
    }
}

@mixin desktop-text-size($size: 12) {
    @include desktop {
        font-size: #{$size}px;
    }
}

@mixin mobile-padding($padding: 0px) {
    @include mobile {
        padding: $padding;
    }
}

@mixin tablet-padding($padding: 0px) {
    @include tablet {
        padding: $padding;
    }
}

@mixin desktop-padding($padding: 0px) {
    @include desktop {
        padding: $padding;
    }
}

@mixin mobile-margin($margin: 0px) {
    @include mobile {
        margin: $margin;
    }
}

@mixin tablet-margin($margin: 0px) {
    @include tablet {
        margin: $margin;
    }
}

@mixin desktop-margin($margin: 0px) {
    @include desktop {
        margin: $margin;
    }
}

@mixin mobile-gap($gap: 20px) {
    @include mobile {
        gap: #{$gap}px;
    }
}

@mixin tablet-gap($gap: 20px) {
    @include tablet {
        gap: #{$gap}px;
    }
}

@mixin desktop-gap($gap: 20px) {
    @include desktop {
        gap: #{$gap}px;
    }
}

@mixin mt {
    @media only screen and (max-width: 820px) {
        @content;
    }
}

@mixin tran-ease {
    transition: 0.3s all ease;
}

@mixin mobile-center {
    @include mobile {
        text-align: center;
    }
}

@mixin hover {
    &:hover {
        @content;
    }
}

@mixin focus {
    &:focus {
        @content;
    }
}
@mixin active {
    &:active {
        @content;
    }
}