@import './variables';

// Mixins
@import './mixins/color_mixins';


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-family);
    font-size: var(--defualt-font-size);
    color: var(--text-color);
    scrollbar-width: thin;
    scrollbar-color: var(--sidebar-color) transparent;
}

i{
    fill: var(--text-color);
}

.pointer{
    cursor: pointer;
}

body{
    background: var(--main-background);
}

html{
    scroll-behavior: smooth;
}


// Main content

.main{
    position: relative;
    transition: padding-left 0.5s ease;
    transition-delay: 0.3s;
}

.container{
    position: relative;
    padding: var(--main-top-bottom-padding) var(--main-left-right-padding);
}

.complete-open{
    padding-left: var(--sidebar-open-width);
    transition-delay: 0.2s;
}

.partial-open{
    padding-left: var(--sidebar-partial-width);
    transition-delay: 0.4s;
}

// Loading Animation

.loading{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.loader{
    position: relative;
    width: var(--loading-square-side);
    height: var(--loading-square-side);
    border: var(--loading-thickness) var(--loading-color) solid;
    // border-bottom: 8px var(--accent-color) solid;
    border-radius: 100%;
    border-block-end: solid; 
    border-block-end-color: var(--accent-color);
    border-block-end-width: var(--loading-thickness);

    animation: load 1s linear infinite;
}

@keyframes load {
    from{
        transform: rotateZ(0deg);
    }

    to{
        transform: rotateZ(360deg);
    }
}

// Display

.show-on-mobile{
    display: none;
}

@media only screen and (max-width: $mobile-breakpoint) {
    .container{
        padding: 1rem 2rem;
    }

    .complete-open, .partial-open{
        padding-left: 0;
    }

    .show-on-mobile{
        display:initial;
    }
}

// Imports
@import './text';
@import './visual';
@import './developers';

// Layout
@import './positioning';
@import './navbar';
@import './sidebar';
@import './footer';
@import './column';

// Components
@import './cards';
@import './carousel';
@import './buttons';
@import './images';