@import "../styles";

.page-settings {
    & .lg-container {
        @apply flex items-start;
        @apply pt-32;
        @apply mb-80;
    }
    & nav.settings-nav {
        @apply shadow-lg rounded-8;
        @apply py-24 px-32 mr-48;
        @apply flex-shrink-0 flex-grow-0;

        @apply text-18 leading-150 font-semibold;
        width: 31%;
        min-width: 340px;

        & li:not(:last-child) {
            @apply mb-8;
        }
        & a {
            @apply text-prominentLinkColor;
        }
    }
    & article {
        @apply flex-grow;

        & h1 {
            @apply text-h2 mb-16;
        }
        & h2 {
            @apply text-h3 mb-16;
        }
        & .c-divider {
            margin-top: -8px;
            @apply mb-24;
        }

        ul {
            list-style-type: disc;
            @apply ml-20;
            li {
                @apply mb-4;
            }
        }
        & :not(pre) > code {
            @apply inline-flex items-center justify-center rounded-5;
            @apply px-6 text-textColor10 leading-regular;
            background: var(--backgroundColorI);
        }
        & section {
            @apply shadow-lg rounded-8 bg-backgroundColorA;
            @apply relative;
            @apply py-24 px-32 mb-24;

            &.disabled {
                @apply relative;
                &:after {
                    content: "";
                    @apply absolute inset-0 opacity-[0.8] z-[5] cursor-not-allowed;

                    background: rgba(112, 41, 245, 0.05);

                    @apply border-2 border-bootcamp-purple rounded-8;
                }

                .toggle-button:not(.selected) {
                    @apply opacity-50;
                }
            }
            &.danger {
                & h2 {
                    @apply text-h5 mb-8;
                }
            }
            .toggle-button {
                @apply btn btn-xs border-1;

                &.selected {
                    @apply border-midnightBlue;
                    @apply bg-darkSuccessGreen text-white;
                }
            }

            & .form-footer {
                margin-left: -32px;
                margin-right: -32px;
                margin-bottom: -24px;
                @apply py-16 px-32 mt-24;
                @apply border-t-1 border-borderColor6;

                @apply flex items-center;

                & .status {
                    height: 48px;
                    @apply px-24 ml-24;
                    @apply text-16 font-medium;
                    @apply flex items-center;
                    @apply border-2 rounded-8;

                    opacity: 0;
                    animation: fadeIn 0.3s ease-out forwards,
                        0.3s 3s fadeOut ease-in forwards;

                    & .c-icon {
                        height: 24px;
                        width: 24px;
                        @apply mr-16;
                    }
                }
                & .success {
                    @apply bg-veryLightGreen border-darkGreen;
                    @apply text-darkSuccessGreen;
                }
                & .error {
                    @apply bg-bgRed border-alert;
                    @apply text-alert;
                }
            }
        }
        & .label {
            @apply font-mono font-bold text-14 leading-160 text-textColor2;
            @apply uppercase;
            @apply block mb-8;
        }
        & .field {
            & > input {
                @apply w-100;
            }
            & .input {
                & input {
                    @apply border-0;
                }
            }
            & p.info {
                @apply leading-160 text-textColor6;
                @apply mt-8;
                & strong {
                    @apply text-textColor2 font-semibold text-caution;
                }
            }
        }
    }
}
#page-settings-api {
    & section {
        @apply flex flex-col;
    }

    & .c-copy-text-to-clipboard {
        width: 400px;
        @apply mb-12;
    }
    & .c-prominent-link {
        @apply mb-20;
    }
}
#page-settings-general {
    & .unconfirmed-email {
        @apply border-2 border-orange rounded-8;
        @apply bg-lightOrange;
        @apply py-12 px-24 mb-24;
        @apply text-caution font-medium text-16 leading-150;
        @apply flex items-center;

        & form.button_to {
            @apply ml-auto;
        }
    }
    & .details {
        @apply grid grid-cols-2 gap-24;
        @apply mb-16;
        & .field {
            @apply mt-0 !important;
        }
    }
    & .field + .field {
        @apply mt-16;
    }
    & .bio {
        & textarea {
            @apply w-100 mb-12;
            height: 104px;
        }

        & .instructions {
            @apply leading-150 text-textColor6;
        }
    }

    .seniority {
        .c-single-select {
            .c-results-zone button,
            button {
                @apply shadow-sm;
            }
        }
    }
    & .pronouns-section {
        & .instructions {
            @apply mb-24;
            @apply text-16 leading-160;

            & strong {
                @apply font-medium text-textColor2;
            }
            & a {
                @apply font-semibold text-prominentLinkColor;
            }
        }

        & .testimonial {
            @apply border-2 border-backgroundColorI;
            @apply bg-backgroundColorF rounded-8;
            @apply rounded-8;

            & .text {
                @apply text-18 text-textColor2;
                margin: 0 auto;
                max-width: 1000px;
                @apply py-16 px-24;
                @apply text-center;
            }

            & input {
                @apply bg-backgroundColorA;
                @apply border-1 border-buttonBorderColor2;
                @apply py-8 px-12 mx-8;
                @apply text-center;
                width: 100px;
            }

            & .commonly-used {
                @apply bg-backgroundColorI;
                @apply py-12 px-24;
                @apply flex items-center justify-center;
                & .info {
                    @apply mr-16;
                    @apply text-16 leading-150 text-center text-textColor2 font-medium;
                }
                & button {
                    @apply text-white font-semibold;
                    @apply bg-linkColor rounded-100;
                    height: 28px;
                    @apply px-10;
                    white-space: nowrap;
                }
                & button + button {
                    @apply ml-8;
                }
            }
        }
    }
    & section.picture-section {
        & .c-avatar-selector {
            @apply flex-row items-center;
            & h2 {
                @apply hidden;
            }
            & .--details {
                @apply items-start;
                @apply ml-24;
            }
        }
    }
    & section.github-section {
        & a.external-link {
            @apply inline-flex items-center mr-8;
            @apply font-medium;
            color: var(--c-prominent-link-color);
            & .c-icon {
                height: 16px;
                width: 16px;
                filter: var(--c-prominent-link-icon-filter);
                @apply ml-4;
            }
        }
    }
    & .danger-section {
        @apply grid grid-cols-2 gap-24;
        & .box {
            @apply border-2 border-alert rounded-8;
            @apply py-16 px-24;
            @apply self-start;
            background: var(--backgroundColorDangerSection);

            & h2 {
                @apply text-h4 mb-8;
            }
            & .info {
                @apply mb-16;
                @apply text-textColor2 text-16 leading-150;

                & strong {
                    @apply text-alert font-semibold;
                }
                & p {
                    @apply mb-8;
                }
                & ul {
                    @apply list-disc pl-20;
                }
            }
        }
    }
}
#page-settings-preferences {
    & .c-checkbox-wrapper {
        @apply mb-16;
        & .row {
            @apply text-16 leading-160 font-medium;
        }
    }

    .--selected-theme {
        @apply outline outline-4 outline-successColor;
        + label {
            @apply text-successColor text-15;
        }
    }
}
#page-settings-donations {
    & .subscription-box {
        @apply flex items-start;
        @apply border-2 rounded-8;
        @apply py-20 px-24;
        @apply bg-backgroundColorF;
        /* TODO */
        @apply border-gradient;
        & > .c-icon {
            height: 128px;
            width: 128px;
            @apply mr-16;
        }
        & h2 {
            @apply text-h4 mb-4;
        }
        & p {
            &:not(&:last-child) {
                @apply mb-8;
            }
            & strong {
                @apply font-medium text-textColor2;
            }
        }
        & .options {
            @apply text-16 leading-150 text-textColor2;

            & button {
                @apply inline;
            }
        }
        & .expanded-option {
            @apply mt-16 pt-16;
            @apply border-t-1 border-borderColor6;

            & form {
                max-width: 420px;
            }
            & label {
                @apply mb-8;
            }
            & .c-faux-input {
                @apply mb-12;
            }
            & p.footnote {
                @apply leading-150 text-textColor6;
                @apply mb-12;

                & strong {
                    @apply font-medium text-textColor5;
                }
            }
        }
    }

    & .summary-box {
        @apply py-12 px-24 mt-32 mb-28;
        @apply bg-backgroundColorE;
        @apply rounded-8;

        & .total {
            @apply flex flex-col items-center;
            @apply mr-40;

            & .c-financial-amount {
                @apply mb-8;
                @apply font-semibold text-textColor2;
            }
            & .explanation {
                @apply text-16 leading-140 text-textColor6 font-medium;
            }
        }
        & .breakdown {
            @apply text-16 leading-140 text-textColor6 font-medium;
            & .subs {
                @apply mb-6;
            }
        }
    }
    & table.payments {
        @apply w-100 table-fixed;
        & tr {
            @apply border-b-1 border-borderColor6;
        }
        & th {
            @apply text-left font-mono font-bold leading-150 text-textColor2;
            @apply uppercase;
            @apply py-8;
        }
        & td {
            @apply text-16 leading-150;
            @apply py-10;
            min-width: 180px;
            &:last-child {
                @apply text-right;
            }

            & a {
                @apply inline-flex;
            }
        }
    }
}

#page-settings-github-syncer {
    section.danger-zone {
        @apply border-2 border-danger;
        background: var(--backgroundColorDangerSection);

        strong {
            @apply text-alert font-semibold;
        }
    }

    #manual-sync-section {
        .c-single-select {
            button {
                @apply shadow-sm;
            }
            ul {
                @apply list-none ml-0;
            }
        }
    }
}
