.MultilanguageCode {
    display: flex;
    flex-direction: column;

    & > input[type="radio"] {
        display: none;
    }

    & > .labels {
        --gap: 10px;
        display: flex;
        gap: 1.5px;
        padding: var(--gap) var(--gap) 0 var(--gap);
        background-color: var(--color-base-darker);

        & > label {
            padding: 5px 10px 3px 10px;
            background-color: var(--color-base-darker);
            color: rgba(255, 255, 255, .6);
            font-size: var(--font-size-small);
            font-weight: 500;
            border-top-left-radius: var(--border-radius);
            border-top-right-radius: var(--border-radius);
            cursor: pointer;

            &:hover {
                color: #fff;
            }
        }
    }

    & > .contents {
        flex-basis: 100%;
        & > .tabContent {
            display: none;
            height: 100%;
            & > code {
                height: 100%;
            }
        }
    }

    & > #tabShell:checked ~ .contents #contentShell,
    & > #tabPhp:checked ~ .contents #contentPhp {
        display: block;
    }

    & > #tabShell:checked ~ .labels label[for="tabShell"],
    & > #tabPhp:checked ~ .labels label[for="tabPhp"] {
        background-color: var(--color-base-dark);
        color: #fff;
    }
}