@import "lesshat/lesshat";
@import "vars";
@import url("icons.css");

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    src:
        local('Roboto Light'), 
        url(fonts/Roboto-300.ttf) format('truetype');
  }
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src:
        local('Roboto'), 
         url(fonts/Roboto-400.ttf) format('truetype');
}

@swan-nav-color-dark: #0f3159;
@swan-nav-color-dark-hover: #0053a1;
@swan-nav-color-light: #0053a1;
@swan-nav-color-light-hover: #00407b;

@swan-heading-color-light: #0053a1;
@swan-heading-color-dark: #60b2ff;


// Page wrapper
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

// Navbar
nav.navbar {
    // Same as mb-5 from bootstrap
    margin-bottom: 3rem !important;

    ul.navbar-nav {
        align-items: center;
    }
}

// Main content area
nav + .container, nav + .container-fluid {
    display: flex;
    flex-direction: column;
    // Align short content to ~1/3 of the viewport height (optical center)
    min-height: 55vh;
    justify-content: center;
}

footer {
    // Keep the footer at the bottom of the page, even if the content is short
    margin-top: auto;

    img {
        max-height: 55px;
    }
}

[data-bs-theme="light"] {
    h1, h2, h3, h4, h5, h6 {
        color: @swan-heading-color-light;
    }

    nav {
        background-color: @swan-nav-color-light !important;

        li.nav-item {
            color: white;

            .swan-nav-link {
                color: white;

                &:hover {
                    background-color: @swan-nav-color-light-hover !important;
                }
            }
        }

        #dark-theme-toggle {
            .fa-sun {
                color: white;
            }

            .fa-moon {
                display: none;
            }
        }
    }
}

[data-bs-theme="dark"] {
    h1, h2, h3, h4, h5, h6 {
        color: @swan-heading-color-dark;
    }

    nav {
        background-color: @swan-nav-color-dark !important;

        li.nav-item .swan-nav-link:hover {
            background-color: @swan-nav-color-dark-hover !important;
        }

        #dark-theme-toggle .fa-sun {
            display: none;
        }
    }
}

footer .container-fluid {
    background-color: var(--bs-tertiary-bg) !important;
}

// Improve color contrast of outline buttons in dark mode
[data-bs-theme="dark"] .btn-outline-secondary {
    color: var(--bs-secondary-color);

    &:hover {
        color: var(--bs-secondary-hover-color);
    }
}

// Invert CERN logo in light mode
[data-bs-theme="light"] footer img {
    filter: invert(1);
}

// Fix color contrast of footer links in dark mode
[data-bs-theme="dark"] footer a.link-secondary {
    color: var(--bs-secondary-color) !important;

    &:hover {
        color: var(--bs-secondary-hover-color) !important;
    }
}

// Fix the version footer on the Admin page not sticking to the bottom
.version_footer {
    margin-top: auto;
}

#swan-loader {
    --loader-size: 180px;
    --ring-width: 4px;
    --ring-color: var(--bs-primary);

    .loader-ring {
        position: relative;
        width: var(--loader-size);
        height: var(--loader-size);
        display: flex;
        align-items: center;
        justify-content: center;

        img {
            width: 60%;
            height: auto;
        }
    }

    &:not(.loader-error) .loader-ring::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: var(--ring-width) solid transparent;
        border-top-color: var(--ring-color);
        animation: spin 1s linear infinite;
    }

    .loader-ring::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: var(--ring-width) solid color-mix(in srgb, var(--ring-color) 15%, transparent);
    }

    &.loader-error .loader-ring::after {
        border-color: var(--bs-danger);
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }
}
