// No semantic
address nav,
a a,
a label,
a button,
label a,
label label,
button a,
button label,
button button {
    outline: 5px solid red;
}

// Sticker
.#{$prefix}sticker {
    &::before,
    &::after {
        color:       white;
        font-size:   12px;
        line-height: 40px;
        min-width:   80px;
        height:      40px;
        content:     "";
        display:     block;
        position:    fixed;
        top:         auto;
        bottom:      0;
        text-align:  center;
        z-index:     $zindex_debug;
    }

    &::before {
        background-color: rgba(59, 59, 255, 0.6);
        left:             auto;
        right:            0;
    }

    &::after {
        background-color: rgba(0, 182, 141, 0.6);
        left:             0;
        right:            auto;
    }
}

@media only screen and (min-width: getBreakpoint($grid_column) + 1) {
    .#{$prefix}sticker::before {
        content: ">= #{$grid_column} bp";
    }
}

@for $i from $grid_column to 1 {
    .#{$prefix}sticker::before {
        @media only screen and (max-width: getBreakpoint($i)) {
            content: "#{$i - 1} - #{$i} bp";
        }
    }
}

@media only screen and (max-width: 1in) {
    .#{$prefix}sticker::after {
        content: "<= 1'";
    }
}

@for $i from 1 through 23 {
    $j: $i + 0.5;
    $k: $i + 1;
    .#{$prefix}sticker::after {
        @media only screen {
            @media (min-width: #{$i}in) and (max-width: #{$j}in) {
                content: "#{$i}' - #{$j}'";
            }

            @media (min-width: #{$j}in) and (max-width: #{$k}in) {
                content: "#{$j}' - #{$k}'";
            }
        }
    }
}

// TODO: root debug
//:root {
//    --var3: #{$breakpoint_placeholders};
//}