@import "../variables";

.sg-section {
    @include border-radius();

    &.-no-radius {
        border-radius: 0;
    }

    &.-radius-top {
        @include border-top-radius(5px);
        @include border-bottom-radius(0);
    }

    &.-radius-bottom {
        @include border-top-radius(0);
        @include border-bottom-radius(5px);
    }

    &__shadow {

        @include media-breakpoint-up(md) {
            box-shadow: $box-shadow;
            @include border-radius();
            padding: ($spacer * 1) ($spacer * 1);
        }

        @include media-breakpoint-up(xl) {
            padding: ($spacer * 3) ($spacer * 3.5);   
        }
    }

    &.-border-primary {
        border: 1px solid $mlp-gray-lighter;
    }

    &.-spacing-half {
        padding: ($spacer * 1) ($spacer * 1.5);
    }

    &.-spacing {
        padding: ($spacer * 1) ($spacer * 1);

        @include media-breakpoint-up(xl) {
            padding: ($spacer * 2) ($spacer * 2.5);   
        }
    }
    
    &.-back-primary {
        background-color: $gray-lighter;
    }

    &.-back-secondary {
        background-color: $white;
    }

    &.-back-tertiary {
        background-color: $black;
    }

    &.-box-shadow {
        box-shadow: $box-shadow;
    }

    &.-border-secondary {
        border: 1px solid $mlp-green;
    }
}