/**
 * Copyright (c) 2024, WSO2 LLC. (https://www.wso2.com).
 *
 * WSO2 LLC. licenses this file to you under the Apache License,
 * Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied. See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

.flex-container {
    display: flex;
    justify-content: start;
    gap: 80px;
}

.flex-column {
    flex: 1;
    padding: 20px;
}

.summary-box {
    margin: 40px 0 70px;
}

ul.tick-list {
    list-style: none;
    margin-left: 0 !important;
}

ul.tick-list > li {
    margin-left: 0 !important;
    padding-left: 20px;
    position: relative;
}

ul.tick-list > li:before {
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M21.03 5.72a.75.75 0 0 1 0 1.06l-11.5 11.5a.747.747 0 0 1-1.072-.012l-5.5-5.75a.75.75 0 1 1 1.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 0 1 1.06 0Z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    content: " ";
    position: absolute;
    top: .35rem;
    left: 0;
}

/* Encoded color code is used for path due to not working */
[data-md-color-scheme="slate"] ul.tick-list > li:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="%23fff" d="M21.03 5.72a.75.75 0 0 1 0 1.06l-11.5 11.5a.747.747 0 0 1-1.072-.012l-5.5-5.75a.75.75 0 1 1 1.084-1.036l4.97 5.195L19.97 5.72a.75.75 0 0 1 1.06 0Z"></path></svg>');
}

.github-icon:before {
    width: 12px;
    height: 12px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
    content: " ";
    margin-right: 8px;
}

/* Encoded color code is used for path due to not working */
[data-md-color-scheme="slate"] .github-icon:before {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill="%23fff" d="M8 0c4.42 0 8 3.58 8 8a8.013 8.013 0 0 1-5.45 7.59c-.4.08-.55-.17-.55-.38 0-.27.01-1.13.01-2.2 0-.75-.25-1.23-.54-1.48 1.78-.2 3.65-.88 3.65-3.95 0-.88-.31-1.59-.82-2.15.08-.2.36-1.02-.08-2.12 0 0-.67-.22-2.2.82-.64-.18-1.32-.27-2-.27-.68 0-1.36.09-2 .27-1.53-1.03-2.2-.82-2.2-.82-.44 1.1-.16 1.92-.08 2.12-.51.56-.82 1.28-.82 2.15 0 3.06 1.86 3.75 3.64 3.95-.23.2-.44.55-.51 1.07-.46.21-1.61.55-2.33-.66-.15-.24-.6-.83-1.23-.82-.67.01-.27.38.01.53.34.19.73.9.82 1.13.16.45.68 1.31 2.69.94 0 .67.01 1.3.01 1.49 0 .21-.15.45-.55.38A7.995 7.995 0 0 1 0 8c0-4.42 3.58-8 8-8Z"></path></svg>');
}

.step {
    margin-left: 15px;
    padding: 0 0 1rem 40px;
    border-left: 1px solid var(--md-default-fg-color);
}

.step > h2 {
    margin-top: 0 !important;
}

.step:last-child {
    border-left: none;
}

.steps-section {
    margin: 2rem 0 3rem;
}

.step-number {
    position: absolute;
    left: -56px;
    background: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
    font-size: 16px;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    line-height: 30px;
    text-align: center;
}

.step > h2 {
    position: relative;
    line-height: 1.1;
}

.md-nav--secondary .md-nav__list {
    margin-top: .7rem;
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link {
    position: relative;
    overflow: visible;
    padding: 0 .6rem .5rem .8rem;
    margin: 0;
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link::before {
    content: '';
    position: absolute;
    top: .95rem;
    left: 0;
    width: 0;
    height: calc(100% - 12px);
    border-left: 1px solid var(--md-default-fg-color);
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__item:last-child > .md-nav__link::before {
    border-left: none !important;
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link .toc-step-number {
    display: block;
    top: 4px;
    left: -7px;
    position: absolute;
    height: 14px;
    width: 14px;
    font-size: .46rem;
    border-radius: 50%;
    background: var(--md-default-fg-color);
    color: var(--md-default-bg-color);
    text-align: center;
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link.md-nav__link--active .toc-step-number {
    color: var(--colors-white);
    background: var(--md-typeset-a-color);
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link.md-nav__link--passed:not(.md-nav__link--active) .toc-step-number {
    background: var(--md-default-fg-color--light);
}

.md-sidebar--secondary [data-md-component='toc'] .md-nav__link.md-nav__link--passed::before {
    border-left-color: var(--md-default-fg-color--light);
}

/* Responsive styles */
@media (max-width: 768px) {
    .flex-container {
        display: block;
    }
}

/* Mode selection styles */

.mode-selection-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    justify-content: center;
}

.mode-selection-container .mode-selection-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    margin: 8px 0;
    border: 2px solid var(--md-default-fg-color--light);
    color: var(--md-default-fg-color--light);
    border-radius: var(--md-border-radius);
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s ease;
    width: 100%;
}

.mode-selection-container .mode-selection-btn:hover {
    border-color: var(--md-primary-fg-color);
    background: rgba(var(--md-primary-fg-color-rgb), 0.05);
    color: var(--md-default-fg-color--light);
}

.mode-selection-container .mode-selection-btn.active {
    border-color: var(--md-primary-fg-color);
    background: rgba(var(--md-primary-fg-color-rgb), 0.1);
    color: var(--md-primary-fg-color);
}

.mode-selection-container .mode-selection-btn .mode-radio {
    width: 20px;
    height: 20px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--md-primary-fg-color);
    transform: scale(1.2);
}

.mode-selection-container .mode-selection-btn.radio-circle {
    display: none;
}

/* Dark mode adjustments for buttons */
[data-md-color-scheme="slate"] .mode-selection-btn {
    color: var(--md-default-fg-color);
    border-color: var(--md-default-fg-color--lightest);
}

[data-md_color-scheme="slate"] .mode-selection-btn:hover {
    background-color: rgba(82, 108, 254, 0.1);
    border-color: var(--md-primary-fg-color);
}

[data-md_color-scheme="slate"] .mode-selection-btn.active {
    background-color: var(--md-primary-fg-color);
    color: var(--md-primary-bg-color);
    border-color: var(--md-primary-fg-color);
}

[data-md_color-scheme="slate"] .mode-selection-container .mode-selection-btn .mode-radio {
    accent-color: var(--md-primary-fg-color);
}