@use 'variables' as *;

$zwssgroption: ".zwssgr";

#{$zwssgroption} {

    &-selected-option-display {
        margin-top: 20px;
        padding: 10px;
        background-color: var(--gray-color-200);
        border: 1px solid var(--gray-color-100);
        font-size: var(--font-size-h2);
    }
    &-toogle-display {
        background-color: var(--gray-color-light);
        border: 1px solid var(--border-gray);
        padding: 30px;
        margin: 0 auto;
        text-align: center;
    }

    &-option-item {
        display: none;
        margin: 20px 0;
        padding: 20px;
        background-color: var(--white-color);
        box-shadow: 0px 0.5px 2px 0px var(--extra-dark-secondary-color);
        border-radius: var(--border-radius-large);
    
        &.selected {
            border: 5px solid var(--secondary-color-100);
    
            &[data-type="badge"] {
                background-color: var(--primary-color);
    
                .zwssgr-layout-title {
                    color: var(--black-color);
                }
            }
        }
    }

}