// resources/scss/_mixins.scss
// Responsive mixins
@mixin respond-to($breakpoint) {
    @if $breakpoint==sm {
        @media (min-width: $breakpoint-sm) {
            @content;
        }
    }

    @if $breakpoint==md {
        @media (min-width: $breakpoint-md) {
            @content;
        }
    }

    @if $breakpoint==lg {
        @media (min-width: $breakpoint-lg) {
            @content;
        }
    }

    @if $breakpoint==xl {
        @media (min-width: $breakpoint-xl) {
            @content;
        }
    }

    @if $breakpoint==2xl {
        @media (min-width: $breakpoint-2xl) {
            @content;
        }
    }
}

// Flexbox mixins
@mixin flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

@mixin flex-column {
    display: flex;
    flex-direction: column;
}

// Transition mixins
@mixin transition-all {
    transition: all 0.3s ease-in-out;
}

@mixin transition-transform {
    transition: transform 0.3s ease-in-out;
}

@mixin hover-lift {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;

    &:hover {
        transform: translateY(-4px);
        box-shadow: $shadow-xl;
    }
}

// Button mixins
@mixin btn-base {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;

    &:focus {
        outline: 2px solid transparent;
        outline-offset: 2px;
    }

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

@mixin btn-primary {
    @include btn-base;
    background-color: $accent-yellow;
    color: $primary-blue;
    padding: 1rem 2rem;
    font-size: 1.125rem;

    &:hover {
        background-color: $accent-yellow-dark;
        transform: scale(1.05);
    }
}

@mixin btn-secondary {
    @include btn-base;
    background-color: $primary-blue;
    color: white;
    padding: 0.75rem 2rem;

    &:hover {
        background-color: $primary-light;
    }
}