.input-switch {
    display: flex;
    flex-wrap: wrap;

    border: 1px solid var(--input-stroke);
    border-radius: .5rem;

    background-color: var(--input-base);

    .switch-wrapper {
        flex: 1;
        display: grid;
        place-items: center;

        padding: .25rem;

        & > label {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;

            width: 100%;
            height: 100%;

            padding: .45rem;

            font: var(--body-sm);
            color: var(--text-body);

            border-radius: .25rem;

            cursor: pointer;
        }

        &:has(:checked) label,
        &:focus-within label {
            background: var(--shape-button);

            font-weight: 600;

            & > svg path {
                fill: var(--brand-light);
            }
        }
    }

    & > .switch-wrapper:first-child {
        padding-right: .125rem;
    }

    & > .switch-wrapper:last-child {
        padding-left: .125rem;
    }
}

.input-switch-2 {
    label {
        display: block;

        width: 4rem;
        height: 2rem;

        border-radius: 999px;
        border: 1px solid var(--input-stroke);

        background: var(--input-base);

        position: relative;
        cursor: pointer;
    }

    label::before {
        content: "";

        position: absolute;
        left: .25rem;
        top: 50%;
        transform: translateY(-50%);

        width: 1.5rem;
        height: 1.5rem;

        border-radius: 50%;

        background: var(--input-stroke);

        transition: .35s ease left;
    }

    label::after {
        content: "Escuro";

        position: absolute;
        left: 4.75rem;
        top: 50%;
        transform: translateY(-50%);

        font: var(--body-sm);
        color: var(--text-heading);
    }

    &:has(:checked) label::after {
        content: "Claro";
    }

    &:has(:checked) label {
        background: var(--brand-light);
    }

    &:has(:checked) label::before {
        left: calc(100% - 1.75rem);
        background: var(--text-heading);
    }
}