@import "../styles";

body.controller-docs.action-section,
body.controller-docs.action-show,
body.controller-docs.action-track_show,
body.controller-docs.action-track_index {
    padding-left: 66px;
    .auth-buttons {
        a:nth-child(2) {
            @apply sm:flex hidden;
        }
    }
}

@screen xl {
    body.controller-docs.action-section,
    body.controller-docs.action-show,
    body.controller-docs.action-track_show,
    body.controller-docs.action-track_index {
        padding-left: unset;
    }
}

#page-docs-show {
    & .container {
        @apply flex;
    }
    & .docs-content {
        @apply pt-48 pb-48 xl:px-80 px-16;
        @apply flex-grow;
        @apply max-w-[100%] xl:max-w-[940px];

        & h1 {
            @apply text-h1 mb-4;
            overflow-wrap: anywhere;
            hyphens: auto;
        }

        @screen md {
            h1 {
                overflow-wrap: initial;
                hyphens: initial;
            }
        }
        & .h1-subtitle {
            @apply text-23 leading-170 text-textColor6;
        }
        & hr.c-divider {
            @apply my-20;
        }
    }

    .anchored-header {
        @apply relative;

        .copy-header-link-button {
            @apply absolute opacity-0 -left-32 top-[50%] -translate-y-[50%] p-16 pl-0;

            &:hover {
                @apply opacity-100;

                img {
                    @apply filter-prominentLinkColor;
                }
            }
            &:active {
                img {
                    @apply filter-textColor1;
                }
            }

            img {
                @apply filter-textColor6;
            }
        }

        .copy-header-link-feedback {
            @apply absolute opacity-100 -left-32 top-0 -translate-y-[100%] -translate-x-[50%];
            @apply bg-backgroundColorI;
            z-index: 101;
            @apply pl-40 pr-16 py-8;
            @apply text-textColor1 leading-150;
            @apply rounded-8;
            @apply font-body font-semibold;
            @apply shadow-base;
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGNpcmNsZSBjeD0iOCIgY3k9IjgiIHI9IjgiIGZpbGw9IiM1OUQyQUUiLz4KPHBhdGggZD0iTTEwLjg1NjkgNS4xNDI2NEw3LjAyMzk3IDEwLjYxNzlDNi45MjEzOCAxMC43NjU0IDYuNzU0MTggMTAuODU0NSA2LjU3NDYgMTAuODU3NEM2LjM5NTAzIDEwLjg2MDQgNi4yMjQ5NyAxMC43NzY5IDYuMTE3NTYgMTAuNjMyOUw1LjE0MjU4IDkuMzMzMTIiIHN0cm9rZT0iIzEzMEI0MyIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K");
            background-repeat: no-repeat;
            background-position: 16px center;
            animation: copiedFadeOut 0.7s ease-in forwards;
        }

        &:hover .copy-header-link-button {
            @apply opacity-100;
        }
    }
}
