#settings .arrow {
    &::after {
        content: "\f0d7";
        font-family: "Icon Font";
        @apply inline-block relative pl-[2px] text-disclaimer-mobile;
    }
}

a[data-theme="dark"] {
    &::after {
        content: "\e901";
        font-family: "Icon Font";
        @apply inline-block relative text-[28px];
    }
}

a[data-theme="light"] {
    &::after {
        content: "\e903";
        font-family: "Icon Font";
        @apply inline-block relative text-[28px];
    }
}

a[data-theme="system"] {
    &::after {
        content: "\e902";
        font-family: "Icon Font";
        @apply inline-block relative text-[28px];
    }
}

a[data-search] {
    @apply relative;

    &::before {
        content: "\e900";
        font-family: "Icon Font";
        @apply absolute top-1/2 left-2 -translate-y-1/2 text-[22px] opacity-30;
    }
}

/* Stripe loader */
body .stripe-loading-indicator .stripe,
body .stripe-loading-indicator .stripe-loaded {
    @apply bg-blue h-1;
    box-shadow: none;
}

html {
    /* max-width: 1280px; */
    margin: 0 auto;
}

html {
    font-family: "Play", sans-serif !important;
}

header {
    padding-top: 20px;
    padding-bottom: 20px;
}

header img {
    margin-right: 52px;
    height: 24px;
}

header ul li a span {
    margin-left: 8px;
}

header input {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: #e4e4e4;
}

a {
    cursor: pointer;
}

footer {
    background-color: #171717;
    color: #c3c3c3;
}

footer img {
    margin-bottom: 5px;
}

footer > .footer-container {
    display: flex;
    flex-direction: row;
    padding-top: 62px;
    padding-bottom: 69px;
    gap: 142px;
}

.copyright {
    background-color: #0f0f0f;
    padding-top: 20px;
    padding-bottom: 20px;
}

/* Github button logo */
a.github::before {
    content: "\f09b";
    font-family: "Icon Font";
    @apply inline-block relative text-[16px] pr-1 top-[2px];
}

/* Mobile menu */
.mobile-logo {
    @apply scale-150;
    animation: logoHide 600ms ease-out 1 3s backwards;
    transition: width 175ms ease-out, transform 175ms ease;
}

body.mobile-menu-shown .mobile-logo {
    animation-play-state: paused;
    @apply w-32 scale-100;
}

@media (max-width: 1023px) {
    #navigation {
        @apply pt-0 top-[60px];
        height: calc(100% - 60px);
    }

    #toc {
        @apply pt-0 top-[60px];
        height: calc(100% - 60px);
    }
}

html[data-scroll]:not([data-scroll="0"], [data-direction="up"])
    body:not(.mobile-menu-shown)
    div.nav-menu {
    @apply -translate-y-full;
}

@keyframes logoHide {
    0% {
        @apply w-32;
        @apply scale-100;
    }

    85% {
        @apply scale-100;
    }

    100% {
        @apply w-7;
        @apply scale-150;
    }
}

/* Responsive tables */
div.table-container {
    @apply -mx-6 w-auto px-6 overflow-x-auto flex flex-row;

    &::after {
        content: "";
        @apply block;
    }

    table {
        @apply lg:mx-0 w-full;
    }
}

pre {
    @apply -mx-6 md:mx-0 overflow-x-auto flex flex-row;

    code.language-backend {
        @apply invisible;
    }

    &::after {
        content: "";
        @apply block;
    }
}

.code-toolbar > .toolbar {
    @apply touch:-mx-6 md:mx-0;
}

iframe.backend-preview {
    @apply w-full my-6;
}

.columned-list {
    @apply border border-sky dark:border-navy-light rounded-md p-4 my-8;

    & > ul {
        @apply p-0 m-0 columns-2 md:columns-3 lg:columns-2 2xl:columns-3;

        & > li {
            @apply list-none m-0 py-1;
        }
    }
}