@use "../../../functions" as *;
@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../soul_type" as *;
@use "../../body_atoms" as *;
@use "../../head_layout" as *;
@use "../../soul_object" as *;

// Define your variables (in _variables.scss or similar)
$preview_sizing--border--color: var(--color-border, #ccc);
$preview_sizing--border--width: q(1);
$preview_sizing--border--radius: q(2);

// Optional: color from a CSS custom property
// $info-color: var(--color_log_info);

// ============================================================================
// Preview Mixins
// ============================================================================

// Mixin using SCSS variables
@mixin preview_box {
    border: $preview_sizing--border--width solid $preview_sizing--border--color;
    border-radius: $preview_sizing--border--radius;
    // position: relative;
    // max-width: 100%;
    @include sizing--border;
    width: 100%;
    max-width: 100%;
}

@mixin preview_box--horizontal {
    @include preview_box;
    @include grid__layout(24);
    > *:not(:last-child) {
        border-right: $preview_sizing--border--width solid
            $preview_sizing--border--color;
    }
}

@mixin preview_box--vertical {
    @include preview_box;
    > *:not(:last-child) {
        border-bottom: $preview_sizing--border--width solid
            $preview_sizing--border--color;
    }
}

@mixin preview_box__element {
    min-height: baseline(4);
    position: relative;
    @include sizing--border;
    width: 100%;
    max-width: 100%;
}

@mixin preview_box__live {
    @include preview_box__element;
    padding: baseline(4);
}

@mixin preview_box__info {
    @include preview_box__element;
    padding-left: baseline(4);
    padding-right: baseline(4);
    padding-top: baseline(2);
    padding-bottom: baseline(2);
}

@mixin preview_box__code {
    @include preview_box__element;
    pre {
        padding: baseline(4);
        display: -webkit-box;
        -webkit-line-clamp: 10;
        line-clamp: 10;
        -webkit-box-orient: vertical;
        @include font--size_scale(3);
    }
}

@mixin preview_box__copy_button {
    position: relative;
    // top: q(8);
    // right: q(8);
    // font-size: q(12);
    // padding: q(4) q(8);
    background: #333;
    color: white;
    border: none;
    border-radius: q(4);
    cursor: pointer;
}

@mixin preview_box__swatch {
    border: q(1) solid var(--color_border, #ccc);
    border-radius: q(1);
    overflow: hidden;
    background-color: var(--color_fill_secondary);
}

@mixin preview_box__swatch__color {
    width: 100%;
    @include aspect_ratio(1, 1);
}

@mixin preview_box__swatch__code {
    font-size: q(8);
}

@mixin preview_grid {
    // display: grid;
    // grid-template-columns: 1fr 1fr;
    // gap: q(32);
    margin-bottom: q(48);
    background: white;
    border: q(1) solid #ddd;
    border-radius: q(8);
    overflow: hidden;
}

/// Mixin for grid placeholder style
/// @group Grid Placeholder
@mixin grid--placeholder {
    // display: grid;
    // grid-template-columns: auto auto auto;
    // gap: q(10);
    background-color: rgba(255, 255, 255, 0.8);
    // padding: q(10)
    div {
        background-color: #d9e4ed;
        border: q(1) solid black;
        text-align: center;
        // font-size: q(12);
        max-width: 100%;
        overflow: hidden;
    }
}

@mixin preview_box--horizontal__code {
    @include grid--span--col(6);
    @include font--size("03");
    color: var(--color_text_secondary);
    display: block;
    background: var(--color_fill_secondary);
}

@mixin preview_box--horizontal__live {
    @include grid--span--col(18);
    word-wrap: break-word;
}

@mixin preview_box__info--styled {
    @include box--surface(1);
    @include grid--size--col(2);
    font-size: q(13);
    text-transform: uppercase;
}

.preview_box__swatch {
    @include preview_box__swatch;
}

.preview_box__swatch__color {
    @include preview_box__swatch__color;
}

.preview_box__swatch__code {
    @include preview_box__swatch__code;
}

.preview_grid {
    @include preview_grid;
}

.grid--placeholder {
    @include grid--placeholder;
}

// .main {
//   padding-left: calc(baseline(4) * 8);
//   padding-right: calc(baseline(4) * 8);
// }

// .main[min-width../../../node_modules/="400px"] {
//   padding-left: calc(baseline(4) * 2);
//   padding-right: calc(baseline(4) * 2);
// }

// .grid {
//     display: grid;
//     grid-template-columns: repeat(auto-fill, minmax(q(20), 1fr));
//     gap: q(16);
// }

///////////////////////////////////////////////////////////////////////////////

// .swatch-grid {
//     // display: flex;
//     // flex-wrap: wrap;
//     gap: q(8);
//     margin-bottom: q(32);
// }

// .swatch {
//     width: q(80);
//     height: q(80);
//     border: q(1) solid #ccc;
//     display: flex;
//     align-items: flex-end;
//     justify-content: center;
//     font-size: q(12);
//     color: var(--color_text_primary);
//     padding: q(4);
//     background: white;
// }