@use "../colors.scss";
@use "preview-colors.scss";

.content-preview {
    .primary {
        background-color: preview-colors.$palette-content-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-content-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-content-tertiary-fixed;
    }
}

.expressive-preview {
    .primary {
        background-color: preview-colors.$palette-expressive-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-expressive-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-expressive-tertiary-fixed;
    }
}

.fidelity-preview {
    .primary {
        background-color: preview-colors.$palette-fidelity-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-fidelity-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-fidelity-tertiary-fixed;
    }
}

.fruit-salad-preview {
    .primary {
        background-color: preview-colors.$palette-fruit-salad-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-fruit-salad-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-fruit-salad-tertiary-fixed;
    }
}

.monochrome-preview {
    .primary {
        background-color: preview-colors.$palette-monochrome-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-monochrome-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-monochrome-tertiary-fixed;
    }
}

.neutral-preview {
    .primary {
        background-color: preview-colors.$palette-neutral-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-neutral-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-neutral-tertiary-fixed;
    }
}

.rainbow-preview {
    .primary {
        background-color: preview-colors.$palette-rainbow-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-rainbow-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-rainbow-tertiary-fixed;
    }
}

.tonal-spot-preview {
    .primary {
        background-color: preview-colors.$palette-tonal-spot-primary;
    }
    .secondary {
        background-color: preview-colors.$palette-tonal-spot-secondary-container;
    }
    .tertiary {
        background-color: preview-colors.$palette-tonal-spot-tertiary-fixed;
    }
}

.light-preview {
    label {
        color: preview-colors.$theme-light-on-surface;
    }
    .container {
        background-color: preview-colors.$theme-light-surface;
        .surface_low {
            background-color: preview-colors.$theme-light-surface-container-lowest;
        }
        .surface {
            background-color: preview-colors.$theme-light-surface-container;
        }
        .surface_high {
            background-color: preview-colors.$theme-light-surface-container-highest;
        }
        .btn-1 {
            background-color: preview-colors.$theme-light-primary;
        }
        .btn-2 {
            background-color: preview-colors.$theme-light-secondary_container;
        }
        .btn-3 {
            background-color: preview-colors.$theme-light-tertiary_container;
        }
    }
}

.dark-preview {
    label {
        color: preview-colors.$theme-dark-on-surface;
    }
    .container {
        background-color: preview-colors.$theme-dark-surface;
        .surface_low {
            background-color: preview-colors.$theme-dark-surface-container-lowest;
        }
        .surface {
            background-color: preview-colors.$theme-dark-surface-container;
        }
        .surface_high {
            background-color: preview-colors.$theme-dark-surface-container-highest;
        }
        .btn-1 {
            background-color: preview-colors.$theme-dark-primary;
        }
        .btn-2 {
            background-color: preview-colors.$theme-dark-secondary_container;
        }
        .btn-3 {
            background-color: preview-colors.$theme-dark-tertiary_container;
        }
    }
}

.palette-preview-btn {
    border-radius: 16px;
    background-color: colors.$surface_container_highest;
    padding: 8px;

    .preview {
        border-radius: 50px;
        outline: 2px solid colors.$surface_container;
    }
    &.selected {
        outline: 2px solid colors.$primary;
        outline-offset: -2px;
        border-radius: 16px;
    }
}

.theme-preview-btn {
    padding: 0px;
    border-radius: 20px;
    &.selected {
        outline: 2px solid colors.$primary;
        outline-offset: 2px;
    }
    .container {
        padding: 5px;
        box {
            border-radius: 15px;
        }
    }
    .icon {
        font-family: "Material Symbols Outlined", "Material Icons Outlined";
        font-size: 16pt;
        font-weight: 500;
        margin-right: 2pt;
    }
}
