// Fixed dimension (width/height) utilities
// naming convention: ym-{width|height}-{spacing-scale-index}
// notes:
// - Utilities should strictly follow $ym-spacing-scale
@mixin ym-w-auto {
    width: auto;
}

@mixin ym-w-2 {
    width: var(--ym-spacing-scale-2);
}

@mixin ym-w-3 {
    width: var(--ym-spacing-scale-3);
}

@mixin ym-w-4 {
    width: var(--ym-spacing-scale-4);
}

@mixin ym-w-5 {
    width: var(--ym-spacing-scale-5);
}

@mixin ym-w-6 {
    width: var(--ym-spacing-scale-6);
}

@mixin ym-w-7 {
    width: var(--ym-spacing-scale-7);
}

@mixin ym-w-8 {
    width: var(--ym-spacing-scale-8);
}

@mixin ym-w-9 {
    width: var(--ym-spacing-scale-9);
}

@mixin ym-w-10 {
    width: var(--ym-spacing-scale-10);
}

@mixin ym-w-11 {
    width: var(--ym-spacing-scale-11);
}

@mixin ym-w-12 {
    width: var(--ym-spacing-scale-12);
}

@mixin ym-w-13 {
    width: var(--ym-spacing-scale-13);
}

@mixin ym-w-15 {
    width: var(--ym-spacing-scale-15);
}

@mixin ym-w-20 {
    width: var(--ym-spacing-scale-20);
}

@mixin ym-w-28 {
    width: var(--ym-spacing-scale-28);
}

@mixin ym-w-30 {
    width: var(--ym-spacing-scale-30);
}

@mixin ym-w-34 {
    width: var(--ym-spacing-scale-34);
}

@mixin ym-w-eighth {
    width: 12.5%;
}

@mixin ym-w-5p {
    width: 5%;
}

@mixin ym-w-10p {
    width: 10%;
}

@mixin ym-w-15p {
    width: 15%;
}

@mixin ym-w-20p {
    width: 20%;
}

@mixin ym-w-30p {
    width: 30%;
}

@mixin ym-w-40p {
    width: 40%;
}

@mixin ym-w-quarter {
    width: 25%;
}

@mixin ym-w-half {
    width: 50%;
}

@mixin ym-w-70p {
    width: 70%;
}

@mixin ym-w-85p {
    width: 85%;
}

@mixin ym-w-90p {
    width: 90%;
}

@mixin ym-w-full {
    width: 100%;
}

@mixin ym-w-grid-size-30 {
    width: $grid-size * 30;
}

@mixin ym-w-grid-size-40 {
    width: $grid-size * 40;
}

@mixin ym-xs-w-full {
    @include ym-media-breakpoint-down(sm) {
        @include ym-w-full;
    }
}

@mixin ym-sm-w-full {
    @include ym-media-breakpoint-up(sm) {
        @include ym-w-full;
    }
}

@mixin ym-md-w-full {
    @include ym-media-breakpoint-up(md) {
        @include ym-w-full;
    }
}

@mixin ym-lg-w-full {
    @include ym-media-breakpoint-up(lg) {
        @include ym-w-full;
    }
}

@mixin ym-w-fit-content {
    width: fit-content;
}

@mixin ym-w-max-content {
    width: max-content;
}

@mixin ym-layout-w-limited {
    max-width: $limited-layout-width;
}

@mixin ym-container-xl {
    max-width: $container-xl;
}

@mixin ym-h-auto {
    height: auto;
}

@mixin ym-h-0 {
    height: 0;
}

@mixin ym-h-2 {
    height: var(--ym-spacing-scale-2);
}

@mixin ym-h-3 {
    height: var(--ym-spacing-scale-3);
}

@mixin ym-h-4 {
    height: var(--ym-spacing-scale-4);
}

@mixin ym-h-5 {
    height: var(--ym-spacing-scale-5);
}

@mixin ym-h-6 {
    height: var(--ym-spacing-scale-6);
}

@mixin ym-h-7 {
    height: var(--ym-spacing-scale-7);
}

@mixin ym-h-8 {
    height: var(--ym-spacing-scale-8);
}

@mixin ym-h-9 {
    height: var(--ym-spacing-scale-9);
}

@mixin ym-h-10 {
    height: var(--ym-spacing-scale-10);
}

@mixin ym-h-11 {
    height: var(--ym-spacing-scale-11);
}

@mixin ym-h-11-5 {
    height: var(--ym-spacing-scale-11-5);
}

@mixin ym-h-12 {
    height: var(--ym-spacing-scale-12);
}

@mixin ym-h-13 {
    height: var(--ym-spacing-scale-13);
}

@mixin ym-h-15 {
    height: var(--ym-spacing-scale-15);
}

@mixin ym-h-20 {
    height: var(--ym-spacing-scale-20);
}

@mixin ym-h-26 {
    height: var(--ym-spacing-scale-26);
}

@mixin ym-h-28 {
    height: var(--ym-spacing-scale-28);
}

@mixin ym-h-30 {
    height: var(--ym-spacing-scale-30);
}

@mixin ym-h-full {
    height: 100%;
}

@mixin ym-h-fit-content {
    height: fit-content;
}

@mixin ym-h-max-content {
    height: max-content;
}

@mixin ym-h-100vh {
    height: 100vh;
}

// Responsive dimension (width/height) utilities
// naming convention: ym-{breakpoint}-{width/height}-{spacing-scale-index}
// notes:
// - Utilities should be strictly follow $ym-spacing-scale
@mixin ym-sm-w-auto {
    @include ym-media-breakpoint-up(sm) {
        width: auto;
    }
}

@mixin ym-md-w-auto {
    @include ym-media-breakpoint-up(md) {
        width: auto;
    }
}

@mixin ym-sm-w-half {
    @include ym-media-breakpoint-up(sm) {
        width: 50%;
    }
}

@mixin ym-md-w-half {
    @include ym-media-breakpoint-up(md) {
        width: 50%;
    }
}

@mixin ym-lg-w-half {
    @include ym-media-breakpoint-up(lg) {
        width: 50%;
    }
}

@mixin ym-md-w-50p {
    @include ym-media-breakpoint-up(md) {
        width: 50%;
    }
}

@mixin ym-lg-w-1px {
    @include ym-media-breakpoint-up(lg) {
        width: 1px;
    }
}

@mixin ym-lg-w-auto {
    @include ym-media-breakpoint-up(lg) {
        width: auto;
    }
}

@mixin ym-lg-w-25p {
    @include ym-media-breakpoint-up(lg) {
        width: 25%;
    }
}

@mixin ym-lg-w-30p {
    @include ym-media-breakpoint-up(lg) {
        width: 30%;
    }
}

@mixin ym-lg-w-40p {
    @include ym-media-breakpoint-up(lg) {
        width: 40%;
    }
}

@mixin ym-lg-w-50p {
    @include ym-media-breakpoint-up(lg) {
        width: 50%;
    }
}

// Minimum/Maximum dimension (width/height) utilities
// naming convention: ym-{min/max}-{w/h}-{spacing-scale-index}
// notes:
// - Utilities should strictly follow $ym-spacing-scale
@mixin ym-min-w-0 {
    min-width: 0;
}

@mixin ym-min-w-7 {
    min-width: var(--ym-spacing-scale-7);
}

@mixin ym-min-w-8 {
    min-width: var(--ym-spacing-scale-8);
}

@mixin ym-min-w-9 {
    min-width: var(--ym-spacing-scale-9);
}

@mixin ym-min-w-10 {
    min-width: var(--ym-spacing-scale-10);
}

@mixin ym-min-w-20 {
    min-width: var(--ym-spacing-scale-20);
}

@mixin ym-min-w-full {
    min-width: 100%;
}

@mixin ym-min-w-fit-content {
    min-width: fit-content;
}

@mixin ym-min-h-0 {
    min-height: 0;
}

@mixin ym-min-h-5 {
    min-height: var(--ym-spacing-scale-5);
}

@mixin ym-min-h-6 {
    min-height: var(--ym-spacing-scale-6);
}

@mixin ym-min-h-7 {
    min-height: var(--ym-spacing-scale-7);
}

@mixin ym-min-h-8 {
    min-height: var(--ym-spacing-scale-8);
}

@mixin ym-min-h-9 {
    min-height: var(--ym-spacing-scale-9);
}

@mixin ym-min-h-full {
    min-height: 100%;
}

@mixin ym-max-w-0 {
    max-width: 0;
}

@mixin ym-max-w-15 {
    max-width: var(--ym-spacing-scale-15);
}

@mixin ym-max-w-20 {
    max-width: var(--ym-spacing-scale-20);
}

@mixin ym-max-w-26 {
    max-width: var(--ym-spacing-scale-26);
}

@mixin ym-max-w-34 {
    max-width: var(--ym-spacing-scale-34);
}

@mixin ym-max-w-40 {
    max-width: var(--ym-spacing-scale-40);
}

@mixin ym-max-w-48 {
    max-width: var(--ym-spacing-scale-48);
}

@mixin ym-max-w-54 {
    max-width: var(--ym-spacing-scale-54);
}

@mixin ym-max-w-62 {
    max-width: var(--ym-spacing-scale-62);
}

@mixin ym-max-w-75 {
    max-width: var(--ym-spacing-scale-75);
}

@mixin ym-max-w-80 {
    max-width: var(--ym-spacing-scale-80);
}

@mixin ym-max-w-none {
    max-width: none;
}

@mixin ym-max-w-full {
    max-width: 100%;
}

@mixin ym-max-w-max-content {
    max-width: max-content;
}

@mixin ym-max-h-11 {
    max-height: var(--ym-spacing-scale-11);
}

@mixin ym-max-h-20 {
    max-height: var(--ym-spacing-scale-20);
}

@mixin ym-max-h-26 {
    max-height: var(--ym-spacing-scale-26);
}

@mixin ym-max-h-34 {
    max-height: var(--ym-spacing-scale-34);
}

@mixin ym-max-h-40 {
    max-height: var(--ym-spacing-scale-40);
}

@mixin ym-max-h-48 {
    max-height: var(--ym-spacing-scale-48);
}

@mixin ym-max-h-54 {
    max-height: var(--ym-spacing-scale-54);
}

@mixin ym-max-h-62 {
    max-height: var(--ym-spacing-scale-62);
}

@mixin ym-max-h-75 {
    max-height: var(--ym-spacing-scale-75);
}

@mixin ym-max-h-80 {
    max-height: var(--ym-spacing-scale-80);
}

@mixin ym-max-h-none {
    max-height: none;
}

@mixin ym-max-h-24vh {
    max-height: 24vh;
}

@mixin ym-max-h-full {
    max-height: 100%;
}

@mixin ym-max-w-100vw {
    max-width: 100vw;
}

@mixin ym-max-w-50p {
    max-width: 50%;
}

// Responsive Minimum/Maximum dimension (width/height) utilities
// naming convention: ym-{breakpoint}-{min/max}-{w/h}-{spacing-scale-index}
// notes: 
// - Utilities should strictly follow $ym-spacing-scale
@mixin ym-md-max-w-26 {
    @include ym-media-breakpoint-up(md) {
        max-width: var(--ym-spacing-scale-26);
    }
}

@mixin ym-md-w-15p {
    @include ym-media-breakpoint-up(md) {
        max-width: 15%;
    }
}

@mixin ym-md-w-30p {
    @include ym-media-breakpoint-up(md) {
        max-width: 30%;
    }
}

@mixin ym-md-w-50p {
    @include ym-media-breakpoint-up(md) {
        max-width: 50%;
    }
}

@mixin ym-md-w-70p {
    @include ym-media-breakpoint-up(md) {
        max-width: 70%;
    }
}

@mixin ym-lg-w-80p {
    @include ym-media-breakpoint-up(lg) {
        max-width: 80%;
    }
}