@mixin screen($size) {
    $desktop: '(min-width: 1281px)';
    $tablet: '(min-width: 768px) and (max-width: 1280px)';
    $mobile: '(max-width: 767px)';

    @if $size == desktop {
        @media only screen and #{$desktop} {
            @content;
        }
    } @else if $size == tablet {
        @media only screen and #{$tablet} {
            @content;
        }
    } @else if $size == mobile {
        @media only screen and #{$mobile} {
            @content;
        }
    } @else {
        @media only screen and #{$size} {
            @content;
        }
    }
}

@mixin text-shorten($numLines: 1) {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    @supports (-webkit-line-clamp: $numLines) {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: $numLines;
        -webkit-box-orient: vertical;
    }
}

$start: 0;
$end: 30;

@for $i from $start through $end {
    .pl-#{$i} {
        padding-left: #{$i}px;
    }
    .pr-#{$i} {
        padding-right: #{$i}px;
    }
    .pb-#{$i} {
        padding-bottom: #{$i}px;
    }
    .pt-#{$i} {
        padding-top: #{$i}px;
    }
    .ml-#{$i} {
        margin-left: #{$i}px;
    }
    .mr-#{$i} {
        margin-right: #{$i}px;
    }
    .mb-#{$i} {
        margin-bottom: #{$i}px;
    }
    .mt-#{$i} {
        margin-top: #{$i}px;
    }
    .mx-#{$i} {
        margin: 0 #{$i}px;
    }
    .fz-#{$i} {
        font-size: #{$i}px;
    }
    .px-#{$i} {
        padding: 0 #{$i}px;
    }
    .py-#{$i} {
        padding: #{$i}px 0;
    }
    .text-shorten-#{$i} {
        @include text-shorten(#{$i});
    }
}
$maxFontWeight: 1000;

$positions: top, left, right, bottom, none;

@each $position in $positions {
    @if $position == none {
        .bh-#{$position} {
            border-style: none !important;
        }
    } @else {
        .bh-#{$position} {
            border-#{$position}-style: hidden !important;
        }
    }
}

$positionsText: start, end, right, left, center;
@each $pt in $positionsText {
    .text-#{$pt} {
        text-align: #{$pt};
    }
}

$fw: 100;
@while $fw < $maxFontWeight {
    .fw-#{$fw} {
        font-weight: $fw;
    }
    $fw: $fw + 100;
}

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

@mixin btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    font-weight: var(--font-semibold);
    height: auto;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    transition: var(--transition-all);

    &:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }

    &:active,
    &:focus {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
    }
}

@mixin card-base {
    background: var(--bg-white);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    transition: var(--transition-all);

    @media (max-width: 768px) {
        padding: var(--card-padding-mobile);
    }

    &:hover {
        box-shadow: var(--card-shadow-hover);
    }
}
