@use './variables' as *;

// Responsive mixins
@mixin respond-to($breakpoint) {
    @if $breakpoint == xs {
        @media (max-width: #{$breakpoint-sm - 1px}) {
            @content;
        }
    } @else if $breakpoint == sm {
        @media (min-width: #{$breakpoint-sm}) {
            @content;
        }
    } @else if $breakpoint == md {
        @media (min-width: #{$breakpoint-md}) {
            @content;
        }
    } @else if $breakpoint == lg {
        @media (min-width: #{$breakpoint-lg}) {
            @content;
        }
    } @else if $breakpoint == xl {
        @media (min-width: #{$breakpoint-xl}) {
            @content;
        }
    } @else if $breakpoint == 2xl {
        @media (min-width: #{$breakpoint-2xl}) {
            @content;
        }
    } @else if $breakpoint == mobile {
        @media (max-width: #{$breakpoint-md - 1px}) {
            @content;
        }
    } @else if $breakpoint == tablet {
        @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg - 1px}) {
            @content;
        }
    } @else if $breakpoint == desktop {
        @media (min-width: #{$breakpoint-lg}) {
            @content;
        }
    }
}

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

@mixin transition($property: all, $duration: 0.3s, $easing: ease) {
    transition: $property $duration $easing;
}

@mixin card {
    background: white;
    border-radius: $radius-lg;
    box-shadow: $shadow-sm;
    @include transition(box-shadow, 0.3s);
    
    &:hover {
        box-shadow: $shadow-md;
    }
}

@mixin button($bg-color: $primary-color, $text-color: white) {
    display: inline-block;
    padding: $spacing-sm $spacing-lg;
    border: none;
    border-radius: $radius-md;
    font-size: $font-size-base;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    @include transition(all, 0.3s);
    line-height: 1.5;
    background-color: $bg-color;
    color: $text-color;
    
    &:hover:not(:disabled) {
        opacity: 0.9;
        transform: translateY(-2px);
        box-shadow: $shadow-md;
    }
    
    &:disabled {
        opacity: 0.6;
        cursor: not-allowed;
    }
}