@import '../styles/mixins/debug';

$core-breakpoint-medium: 768px;
$core-breakpoint-large: 1024px;

.padding {
    position: relative;
    padding: 0 var(--padding-small);

    &:before,
    &:after {
        position: absolute;
        top: 0;
        height: 100%;
        @include debug-text;
        display: flex;
        align-items: center;
        justify-content: center;
        width: var(--padding-small);
        content: 'S';
        opacity: 0;
    }

    &:before {
        left: 0;
    }

    &:after {
        right: 0;
    }

    @media only screen and (min-width: $core-breakpoint-medium) {
        padding: 0 var(--padding-medium);

        &:before,
        &:after {
            width: var(--padding-medium);
            content: 'M';
        }
    }

    @media only screen and (min-width: $core-breakpoint-large) {
        padding: 0 var(--padding-large);

        &:before,
        &:after {
            width: var(--padding-large);
            content: 'L';
        }
    }

    &.debug {
        &:before,
        &:after {
            opacity: 1;
            background-color: rgba(0, 255, 255, 0.3);
        }
    }
}