@import "../ui.vars.less";

sc-panel, .sc-panel {
    background-color: @appWhite;
    border-top: 1px solid @scTertiary;
    border-bottom: 1px solid @scTertiary;
    margin: 12px 0px 12px 0px;
    box-shadow: 0px 1px 3px 0px rgba(57, 63, 72, 0.15000000596046448);
    @media screen and (min-width: @mobile-landscape){
        margin: 12px 24px 12px 0px;
        border-radius: @buttonRadius;
        border: none;
    }

    & [inset] sc-panel {
        border-radius: @buttonRadius;
        box-shadow: 0px 1px 3px 0px rgba(57, 63, 72, 0.15000000596046448);
    }
    
    &[hover] {
        &:hover {
            background-color: #e6e6e6;
            transition: .2s;
        }
    }
    
    &[disabled] {
        opacity: 0.4;
        cursor: not-allowed!important;
    
        &[hover] {
            &:hover {
                background-color:@appWhite;
            }
        }
    }
}