.test1 {
    color: red;
    left: 10px;
    .test2 {
        text-align: left;
        padding: 5px;
        width: 100%;
    }
}

.test3 {
    left: 10px;
    &.test4 {
        color: black;
        margin-left: 20px;
    }
    &.test5 {
        padding: 5px;
        span {
            text-align: left;
        }
    }
}

.test6 {
    display: flex;
    .global & {
        color: white;
        padding: 5px 10px 5px 5px;
        border-left-color: #666;
        div {
            margin: 0 auto;
            padding-left: 20px;
        }
    }
    .test7 {
        .global & {
            background-color: #FFF;
            ::after {
                content: "";
                display: block;
                text-align: left;
            }
        }
    }
}

@supports (display: contents) and (display: grid) {
    .test8 {
        color: red;
        left: 10px;
        text-align: left;
    }
    @media screen and (max-width: 800px) {
        .test9 {
            padding: 0 0.6em 0 1.7em;
        }
    }
}

@media screen and (max-width: 800px) {
    @supports (display: contents) and (display: grid) {
        .test10 {
            padding: 0 0.6em 0 1.7em;
        }
    }
}

.test11 {
    .test12 {
        @media (orientation: landscape) {
            grid-auto-flow: column;
            @media (min-width: 1024px) {
                position: relative;
                max-inline-size: 1024px;
                padding: 10px 5px 20px 2px;
            }
        }
        @media screen and (min-width: 800px) {
            background: none;
            color: red;
            left: 10px;
        }
    }
    .test13 {
        text-align: right;
    }
    .test13-left {
        content: "\f007";
    }
    .test13-right {
        content: "\f010";
    }
}

@mixin padding {
    padding-left: 10px;
}

.test14 {
   @include padding;
}

@layer utilities {
  .sm\:pl-8 {
    @media (width >= 40rem) {
      padding-left: calc(var(--spacing) * 8);
    }
  }
}