@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/colors';

$sidebar-border-radius: 3px;

.sideBar {
    &_container {
        max-width: 304px;
        border: 1px solid var(--container-border-color, $gray);
        border-radius: $sidebar-border-radius;	
        background-color: var(--container-background-color, $white);
    }

    &_header {
        border-radius: $sidebar-border-radius $sidebar-border-radius 0 0;
        background-color: var(--header-background-color, $light-gray);
    }
    
    &_headerText {
        @include title-6;
        @include color-title($dark-gray);
        margin: 0;
        line-height: 15px;
        padding: 11px 16px;
        text-transform: uppercase;
    }

    &_textGroup {
        &:not(:first-of-type) {
            margin-top: 30px;
        }
    }

    &_textContainer {
        @include text-4;
        line-height: 24px;
        padding: 32px 17px 37px;
    }

    &_group {
        &Title {
            @include title-4;
            margin: 0 0 5px;
        }
    }
}
