/*
*
* Overriding core styles
*
*/
@import "../../src/scss/global";
@import "../../src/scss/shame/media-queries";

// basic styling für die Standard Page-Componenten
@import '../../lib/fep-header/scss/header';
@import '../../lib/fep-footer/scss/footer';

//*styling für die SourceJS Componenten
@import 'elements/source/grid';
@import 'elements/source/layout';
@import 'elements/source/modal';
@import 'elements/source/navigation';
@import 'elements/source/autocomplete';
@import 'elements/source/links';
@import 'elements/source/highlights';
@import 'elements/source/section';
@import 'elements/source/togglers';
@import 'elements/source/example';
@import 'elements/source/catalog';
@import 'elements/source/code';
@import 'elements/source/info';

//direct-include of the font
@import '../../src/scss/global/font/MarselisSlabWeb.scss';

.MarselisSlabWeb {
    font-family: 'MarselisSlabWeb';
}



//additional Setting for the Layout

.value-table {
    width: 100%;
    border: 1px solid $light-grey;

    tr:nth-child(odd){
        background: $bkg-superlight-grey;
    }
    th {
        background: $bkg-light-grey;
    }
    td {
        box-sizing: border-box;
        padding: 5px;
        width: 25%;
    }
}

:not(pre) > code[class*="src-"],
pre[class*="src-"] {
    background-color: $gray-light-super !important;
    border: 0 none !important;
}

pre[class*="src-"],
pre[class*="src-"] code {
    border-radius: rem-calc(4) !important;
}

// helper
.source_section {

    iframe {
        width: 100%;
        height: 100%;
        border: 0;
        position: absolute;
        left: 0;
        top: 0;
    }

    .source_example {
        min-height: rem-calc(44);
        %element-focus {
            color: $white;
            background-color: $brand;
        }
    }

    &.aspect_ratio {
        [class*="ar-"] {
            background-color: $brand;
        }
    }

    &.column_count {
        [class*="cc-"] {
            p {
                background-color: $brand;
            }
        }
    }

    &.visibility {
        [class*="is-"] {
            @extend %element-focus;
            padding: $page-gap;
        }
    }

    &.display {
        .source_example {
            padding: $page-gap;
            .inline,
            .block,
            .inline-block {
                @extend %element-focus;
            }
        }
    }

    &.typography {
        .source_example {
            padding: $page-gap;
        }
    }

    &.text_alignment {
        .source_example {
            padding: $page-gap;
            color: $brand;
        }
    }

    &.border {
        border: 0;
        .source_example {
            border: 0;
            [class*="border"] {
                padding: $page-gap;
            }
        }
    }

    &.background_border {
        .source_example {
            border: 0;
        }
        .bg-b-l,
        .bg-b-d {
            @extend %element-focus;
            padding: $page-gap;
        }
    }

    &.background_color_has_states,
    &.background_color,
    &.background_color_social_media {
        [class*="bg-"] {
            color: $white;
            padding: $page-gap;
        }
        .bg-white,
        .bg-gray-ls {
            color: $black;
        }
    }

    &.color {
        .source_example {
            padding: $page-gap;
        }
    }

    &.links,
    &.links_has_states {
        .source_example {
            padding: $page-gap;
            background-color: $gray-light;
        }
    }

    &.scrim {
        .scrim {
            &-light {
                background-color: $gray-light-super;
            }
        }
    }

    &.shadows {
        [class*="shadow-"] {
            padding: $page-gap;
            margin: $page-gap * 3;
        }
        a {
            display: block;
        }
    }

    &.spacer {
        .source_example {
            background-color: $brand;
            [class*="mt-"] {
                padding: $page-gap;
                background-color: $gray-light-super;
            }
        }
    }

    &.clearfix {
        .cf-wrapper {
            float: left;
            width: 50%;
            background-color: $gray-light-super;
            margin {
                color: $black;
                background-color: $white;
                display: block;
                margin: $page-gap * 2 0;
                padding: $page-gap;
            }
            display-block,
            display-table {
                @extend %element-focus;
                display: block;
                margin: $page-gap 0;
            }
        }
    }

    &[class*="center_element"] {
        .source_example {
            [class*="ce-"] {
                padding: $page-gap;
                @extend %element-focus;
            }
        }
    }

    &[class*="rotate_element"] {
        .source_example {
            [class*="re-"] {
                padding: $page-gap;
                @extend %element-focus;
                display: inline-block;
            }
        }
    }

    &.floats {
        .source_example {
            .pull-left,
            .pull-right {
                padding: $page-gap;
                @extend %element-focus;
            }
        }
    }

    &.position {
        .source_example {
            .position-absolute,
            .position-relative,
            .position-sticky {
                padding: $page-gap;
                @extend %element-focus;
            }
        }
    }

    &[class*="wrapper"] {
        [class*="wrapper-"] {
            @extend %element-focus;
            p {
                padding: $page-gap;
            }
            [class*="wrapper-"] {
                background-color: blend-multiply($brand, $brand);
            }
        }
    }

    &.wrapper_overlay_header {
        .source_example {
            .wrapper-overlay-header {
                mix-blend-mode: multiply;
            }
        }
    }

}

// components
.source_section {

    &.breadcrumb {
        .Breadcrumb {
            padding : $page-gap;
            &--Light {
                background-color : $gray-light;
            }
        }
    }

    &.button,
    &.button_raised,
    &.button_multiline {
        .source_example {
            padding-bottom : $page-gap;
            .Button {
                margin-top : $page-gap;
            }
        }
    }

    &.button_floating_action {
        .source_example {
            padding-top : $page-gap;
            padding-bottom : $page-gap;
            .Button {
                margin-right : $page-gap;
                margin-left : $page-gap;
            }
        }
    }

    &[class*="button"] {
        .source_example {
            font-size : 0;
        }
    }

    &.aggregate_rating,
    &.aggregate_rating_small{
        .source_example {
            padding : $page-gap;
        }
    }

    &.quote_editor {
        .source_example {
            border: 0;
        }
    }

}