/* Material Grain/Stripe Patterns */

/* Base material setup - no pattern */
.base-material {
    background-position: 0 0;
    background-repeat: repeat;
    background-color: var(--color-base-material-01);
    position: relative;
    margin: 0px 0px 63px 0px;
    outline: 1px solid rgba(var(--color-foreground-rgb), 0.3);
}

/* Ruler classes for different material types */
.rulers-enabled-variable-dims .base-material {
    margin: 54px auto 21px 54px !important;
}

.rulers-enabled-fixed-dims .base-material {
    width: auto;
    margin: 0px auto auto 0px !important;
}

/* Center materials when rulers are disabled */
.rulers-disabled-variable-dims .base-material {
    margin: 18px auto 18px auto !important;
}

.rulers-disabled-fixed-dims .base-material {
    margin: auto !important;
}

.rulers-disabled-variable-dims .sheet-visualization,
.rulers-disabled-fixed-dims .sheet-visualization {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: auto !important;
}

/* SVG Patterns */
.base-material::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.2;

}

/* Stripe (Vertical) */
.base-material.stripeVertical {
    background-image: linear-gradient(
        90deg,
        var(--color-base-material-01) 0px,
        var(--color-base-material-01) 30px,
        var(--color-base-material-02) 30px,
        var(--color-base-material-02) 51px,
        var(--color-base-material-01) 51px,
        var(--color-base-material-01) 90px
    );
    background-size: 60px 100%;
}

/* Stripe (Horizontal) */
.base-material.stripeHorizontal {
    background-image: linear-gradient(
        0deg,
        var(--color-base-material-01) 0px,
        var(--color-base-material-01) 30px,
        var(--color-base-material-02) 30px,
        var(--color-base-material-02) 51px,
        var(--color-base-material-01) 51px,
        var(--color-base-material-01) 90px
    );
    background-size: 100% 60px;
}

/* Stripe (45°) */
.base-material.stripe45 {
    background-image: repeating-linear-gradient(
        -45deg,
        var(--color-base-material-01) 0px,
        var(--color-base-material-01) 30px,
        var(--color-base-material-02) 30px,
        var(--color-base-material-02) 51px,
        var(--color-base-material-01) 51px,
        var(--color-base-material-01) 90px
    );
}

/* Stripe (-45°) */
.base-material.stripe315 {
    background-image: repeating-linear-gradient(
        45deg,
        var(--color-base-material-01) 0px,
        var(--color-base-material-01) 30px,
        var(--color-base-material-02) 30px,
        var(--color-base-material-02) 51px,
        var(--color-base-material-01) 51px,
        var(--color-base-material-01) 90px
    );
}

/* Grain (Width) - Dark Theme */
[data-theme="DARK-MODE"] .base-material.grainWidth::before {
    background-image: url('../../assets/woodgrain-horizontal.svg');
    background-size: 210px;
    background-repeat: repeat;
}

/* Grain (Width) - Light Theme */
[data-theme="LIGHT-MODE"] .base-material.grainWidth::before {
    background-image: url('../../assets/woodgrain-horizontal-light.svg');
    background-size: 210px;
    background-repeat: repeat;
}

/* Grain (Length) - Dark Theme */
[data-theme="DARK-MODE"] .base-material.grainLength::before {
    background-image: url('../../assets/woodgrain-vertical.svg');
    background-size: 210px;
    background-repeat: repeat;
}

/* Grain (Length) - Light Theme */
[data-theme="LIGHT-MODE"] .base-material.grainLength::before {
    background-image: url('../../assets/woodgrain-vertical-light.svg');
    background-size: 210px;
    background-repeat: repeat;
}