@import "../../../assets/css/abstracts/custom-variables.scss";

// Wraps all sections in a div with a max width of 800px and centers it
.sections {
    max-width: 800px;
    margin: 0 auto;
}

// Styles each section with a border and themed radius
section {
    padding: 1.5rem;
    margin-bottom: 20px;
    border: 1px solid $gray-300;
    border-radius: var(--theme-rounded-corners);

    .row {
        margin: 0;
    }

    h3 {
        font-size: 20px;
        margin: 0 0 5px;
    }

    > p, .code-block p {
        margin: 10px 0 0;
        font-weight: bold;
    }
}

.card-demo-wrapper {
    max-width: 250px;
    width: 100%;
    margin: 0 10px 20px 0;
    float: left;
}

.badge-demo-wrapper {
    display: inline-block;
}

hr {
    margin-top: 5px;
    margin-bottom: 9px;
}

.see-demo {
    padding: 9px;
    background: #000;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}

.close-banner {
    font-size: 13px;
    padding: 4px 7px;
    cursor: pointer;
    background: #000;
    color: #fff;
    font-weight: bold;
}

.demo-banner {
    visibility: hidden;
    opacity: 0;
    transition: 0.3s;
}

.demo-banner.open {
    visibility: visible;
    opacity: 1;
    transition: 0.3s;
}

.props {
    max-height: 100px;
    background-color: $gray-100;
    border: 1px solid $gray-200;
    position: relative;
    padding: 15px;
    overflow: hidden;
    transition: 0.32s;

    .more-btn, .less-btn {
        margin: 0 auto;
        position: absolute;
        z-index: 3;
        right: 10px;
        bottom: 10px;

        @media only screen and (max-width : 576px){
            right: 0;
            left: 0;
        }
    }

    .less-btn {
        display: none;
    }

    .attrTitle, .slotTitle {
        position: relative;
        font-weight: bold;
        span {
            background: $gray-100;
            font-size: 16px;
            z-index: 100;
            position: relative;
            padding: 0px 6px 0px 0;
        }

        &::after {
            content: '';
            height: 2px;
            position: absolute;
            top: 50%;
            left: 0;
            right: 0;
            margin-top: 0px;
            margin-left: 10px;
            background: currentColor;
        }
    }

    .attrTitle {
        color: #5c6ac4;
    }

    .slotTitle {
        color: #00ccbc;
    }


    p {
        font-size: 12px;
        margin-bottom: 0;
        & + p.attrName, & + p.slotName {
            border-top: 1px solid $gray-300;
            padding-top: 2px;
            margin-top: 5px;
            font-size: 14px;
            color: #444;
            font-weight: bold;
        }
    }

}


.props.open {
    max-height: 100rem;
    transition: 0.3s;

    .more-btn {
        display: none;
    }

    .less-btn {
        display: block;
    }
}



.code-block .code {
    background: $gray-900;
    color: #fff;
    padding: 1rem;
}
