/*
Specific styles for storybook
*/

.sb-show-main {
    padding: 20px;
}

.storybook-new-row {
    display: flex;
    flex-direction: row;
}

.storybook-component-wrapper {
    margin: 10px;
    padding: 10px;
}

.storybook-component-info {
    display: block;
    text-align: left;
    margin-bottom: 10px;
}

.storybook-icons-showcase {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;

    .storybook-component-wrapper {
        width: 150px;
        text-align: center;
        width: 150px;
        border: solid 1px #eeeeee;
        border-radius: 5px;
    }

    .storybook-component-info {
        text-align: center;
        font-size: 11px;
        user-select: text;
    }

    .storybook-debug-icon {
        border: solid 1px #000000;
    }
}

/*
Specific styles for storybook components sample
*/
.sdc-accordion-custom-class .sdc-accordion-header,
.sdc-accordion-custom-class .sdc-accordion-body.open {
    padding: 10px;
    border-radius: 3px;
}
.sdc-accordion-custom-class .sdc-accordion-header {
    background-color: #d2d2d2;
}
.sdc-accordion-custom-class .sdc-accordion-body.open {
    border: 1px solid #d2d2d2;
    margin-top: 1px;
 }



.colors-table {
    font-size: 13px;

    .color-group {

        display: flex;
        flex-direction: row;
        align-items: flex-start;

        .color-section {

        margin: 0 20px 20px 0;
        text-align: center;
        
        div {
            align-self: center;
            user-select: text;
        }
        $circle-size: 80px;
        .color-circle {
            height: $circle-size;
            width: $circle-size;
            border-radius: $circle-size;
            text-align: center;
        }
        }
    }
}

.storybook-welcome {
    h1 { font-size: 30px; margin: 12px 0 12px 0; }
    h2 { font-size: 24px; margin: 12px 0 12px 0; }
    h3 { font-size: 20px; margin: 12px 0 12px 0; }
    h4 { font-size: 14px; margin: 4px 0 4px 0; text-decoration: underline; }
    code { font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 12px; }
    ul li { list-style: circle; list-style-position: inside; }
}