@import "vars.css";

* { box-sizing:border-box; }
body
{
    font-family:poppins, sans-serif;
    margin:0px;
    font-size:12px;
    color:var(--d-Themes-9);
}

.site
{
    display:grid;
    grid-template-columns:minmax(16%, 275px) 1fr auto;
    height:100vh;
}

input[type="text"],
input[type="number"],
input[type="password"],
input[type="submit"],
select,
textarea,
button
{
    cursor:pointer;
    font-size:var(--fontSize1);
    height:var(--menuItemHeight);
    line-height:var(--menuItemHeight);
    background-color: var(--d-Themes-Overlay);
    padding:0px var(--paddingSmall);
    border:none;
    border-radius:var(--generalRadius);
    color:var(--d-Themes-9);

    &[disabled]
    {
        filter:grayscale(1);
        pointer-events:none;
        opacity:0.4;
    }
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="submit"],
select,
textarea,
{
    padding:0px var(--paddingSmall);
}
textarea
{
    height:auto;
    padding:var(--marginSmall);
    line-height:inherit;
}


input[type="submit"].btn:not(.btn_gray,.btn_red),
.btn:not(.btn_transparent,.btn_gray,.btn_red,a)
{
    color:var(--d-Themes-1);
    background:var(--d-Colors-Primary);
    @media (hover:hover)
    {
        &:hover,
        &:focus
        {
            box-shadow:0px 0px 0px 3px var(--d-Colors-Primary50);
        }
    }
}

.header
{
    position:relative;
    display:flex;
    flex-direction:column;
    text-align:center;
    flex-shrink:0;
    margin:0px;
    padding:0px;
    line-height:38px;
    height:100vh;
    background:var(--d-Themes-1);
    div.header_name a
    {
        display:block;
        text-align:left;
        color:var(--d-Themes-9);
        text-align:left;
        text-decoration:none;
        font-size:25px;
        margin:calc(2  * var(--paddingSmall));
        margin-bottom:var(--paddingSmall);
        letter-spacing:1px;
        font-weight:500;
        line-height:70px;
        text-transform:uppercase;
    }
    .header_name img
    {
        position:relative;
        top:-2px;
        width: 230px;
        height: 40px;
        vertical-align:middle;
    }
    .search_project
    {
        display:flex;
        flex-direction:row;
        background:var(--d-Themes-Overlay);
        padding:0;
        margin:10px var(--marginSmall) 0;
        align-items:flex-start;
        border-radius:var(--generalRadius);

        border:2px solid transparent;
        &:has(input:focus),&:hover
        {
            border:2px solid var(--d-Colors-Primary);
            box-shadow:0px 0px 0px 3px var(--d-Colors-Primary50);
        }
        input
        {
            height:32px;
            width:100%;
            line-height:30px;
            padding:2px 25px 3px 25px;
            background:var(--d-Themes-Overlay);
            line-height:1em;
        }
        input[type="submit"]
        {
            width:auto;
            font-size:0;
            background-color: var(--d-Themes-6);
            padding:2px var(--marginSmall);
            mask-image: url(../img/search.svg);
            mask-repeat:no-repeat;
            mask-size:auto 60%;
            mask-position:center center;
            width:50px;
            @media (hover:hover)
            {
                &:hover,
                &:focus
                {
                    background-color: var(--d-Themes-9);
                }
            }

        }
        input[type="text"]
        {
            border:none;
            background:transparent;
            padding-left:5px;
            margin-left:0px;
            outline:none;
            padding-right:5px;
            color:var(--d-Themes-9);
        }
    }
}

.resize_block
{
    position:absolute;
    height:100%;
    width:2px;
    z-index:2;
    left:-1px;
    cursor:col-resize;
}
.resize_block.resize_right
{
    left:auto;
    right:-1px;
}
.resize_block.moving
{
    left:-10px;
    width:20px;
}
input
{
    vertical-align:middle;
    margin:0;
}

.icon_container
{
    display:inline-flex;
    vertical-align:middle;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    .icon
    {
        margin:0;
    }
    &.bigger
    {
        width:32px;
        height:32px;
        .icon
        {
            width:100%;
            height:100%;
        }
    }
}

.icon
{
    position:relative;
    top:0px;
    display:inline-block;
    width:1.3em;
    height:1.3em;
    vertical-align:middle;
    background:var(--d-Themes-9);
    margin-right:var(--paddingSmall2);
    mask-repeat:no-repeat;
    mask-size:auto 100%;
    mask-position:center center;
    &.icon-brdinc { mask-image: url(../img/brd-1.svg); }
    &.icon-quiksilver { mask-image: url(../img/qs-1.svg); }
    &.icon-roxy { mask-image: url(../img/rx-1.svg); }
    &.icon-dcshoes { mask-image: url(../img/dc-1.svg); }
    &.icon-billabong { mask-image: url(../img/bb-1.svg); }
    &.icon-element { mask-image: url(../img/el-1.svg); }
    &.icon-rvca { mask-image: url(../img/rv-1.svg); }
    &.icon-adobe_target { mask-image: url(../img/adobe_target.svg); }

    &.icon-purge { mask-image: url(../img/purge.svg); }
    &.icon-user { mask-image: url(../img/user.svg); }
    &.icon-loyalty { mask-image: url(../img/loyalty.svg); }
    &.icon-tags { mask-image: url(../img/tags.svg); }
    &.icon-github { mask-image: url(../img/github.svg); }
    &.icon-logout { mask-image: url(../img/logout.svg); }
    &.icon-refresh { mask-image: url(../img/refresh.svg); }
    &.icon-clock { mask-image: url(../img/clock.svg); }
    &.icon-back { mask-image: url(../img/back.svg); }
    &.icon-preview { mask-image: url(../img/preview.svg); }
    &.icon-edit { mask-image: url(../img/edit.svg); }
    &.icon-dots { mask-image: url(../img/dots.svg); top:0.1em; }
    &.icon-filter { mask-image: url(../img/filter.svg); top:0.1em; }
    &.icon-pingu { mask-image: url(../img/pingu.svg); }
    &.icon-config { mask-image: url(../img/config.svg); mask-size:100%; }
    &.icon-reload { mask-image: url(../img/refresh.svg); }
    &.icon-cdn { mask-image: url(../img/cdn.svg); }
    &.icon-asset { mask-image: url(../img/asset.svg); }
    &.icon-output { mask-image: url(../img/sfcc.svg); mask-size:16px; }
    &.icon-import { mask-image: url(../img/import.svg); }
    &.icon-export { mask-image: url(../img/export.svg); }
    &.icon-project { mask-image: url(../img/project.svg); }
    &.icon-folder { mask-image: url(../img/folder.svg); }
    &.icon-close { mask-image: url(../img/close.svg); }
    &.icon-move { mask-image: url(../img/move.svg); }
    &.icon-copy { mask-image: url(../img/copy.svg); }
    &.icon-config { mask-image: url(../img/config.svg); }
    &.icon-delete { mask-image: url(../img/delete.svg); }
    &.icon-share { mask-image: url(../img/share.svg); }
    &.icon-edit { mask-image: url(../img/edit.svg); }
    &.icon-save { mask-image: url(../img/save.svg); }
    &.icon-blog { mask-image: url(../img/blog.svg); }
    &.icon-sfcc { mask-image: url(../img/sfcc.svg); }
    &.icon-hearth { mask-image: url(../img/hearth.svg); }
    &.icon-search { mask-image: url(../img/search.svg); }
    &.icon-hearthempty { mask-image: url(../img/hearth_empty.svg); }
    &.icon-add { mask-image: url(../img/add.svg); }
    &.icon-arrow { mask-image: url(../img/arrow2.svg); }
    &.icon-width { mask-image: url(../img/width.svg); }
}


h3.page_title, .page_title, h2.page_title
{
    text-align:left;
    .icon_container
    {
        margin-right:var(--paddingSmall2);
    }
    margin:0;
    &,a
    {
        text-decoration:none;
        color:var(--d-Themes-9);
        font-weight:var(--fontBoldWeight);
        font-size:var(--fontSizeTitle);
        line-height:var(--menuItemHeight);
    }
    img
    {
        height:1em;
        vertical-align:middle;
        position:relative;
        top:0em;
    }
}


a.btn
{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}
.btn
{
    cursor:pointer;
    border:none;
    padding:0px 1rem;
    border-radius:var(--generalRadius);
    min-height:var(--menuItemHeight);
    line-height:var(--menuItemHeight);
    box-sizing:border-box;
    font-size:12px;
    font-weight:400;
    font-family:poppins;
    letter-spacing:1px;
    background:var(--d-Colors-Primary);
    color:var(--d-Themes-9);
    a&
    {
        background:var(--d-Colors-Primary20);
        color:var(--d-Themes-9);
    }
    text-decoration:none;
    text-align:left;
    &:not(a) .icon
    {
        background:var(--button_color);
    }
    &.btn--delete
    {
        background:var(--red) !important;
        .icon
        {
            background:var(--d-Themes-1) !important;
        }
        @media (hover:hover)
        {
            &:hover,
            &:focus
            {
                background:var(--red) !important;
                .icon
                {
                    background:var(--d-Themes-1) !important;
                }
 
            }
        }

    }
    &.selected
    {
        background: var(--d-Colors-Primary20);
    }
}
.btn_squared
{
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--menuItemHeight);
    height:var(--menuItemHeight);
    flex-shrink:0;
    flex-grow:0;
    margin:0;
    padding:0;
    .icon
    {
        width:16px;
        height:16px;
        margin:0;
        padding:0;
    }
}
.btn.btn_transparent:not(.selected)
{
    background:transparent;
    color:var(--d-Themes-9);
    @media (hover:hover)
    {
        &:hover,
        &:focus
        {
            background:transparent;
            color:var(--d-Themes-9);
        }
    }
    .icon
    {
        background:currentcolor;
    }

}
.btn.btn_hover:not(.selected)
{
    @media (hover:hover)
    {
        &:hover,
        &:focus
        {
            background:var(--d-Colors-Primary20);
            color:var(--d-Themes-9);
        }
    }
    .icon
    {
        background:currentcolor;
    }

}
.btn_gray
{
    background:var(--d-Themes-2) !important;
    color:var(--d-Themes-9);
    .icon
    {
        background:var(--d-Themes-9) !important;
    }
    @media (hover:hover)
    {
        &:hover,
        &:focus
        {
            box-shadow:0px 0px 0px 3px var(--d-Themes-4);

        }
    }

}
.error_message
{
    color:var(--danger);
}

.btn_red
{
    background:var(--danger) !important;
    color:var(--d-Themes-1);
    .icon
    {
        background:var(--d-Themes-1) !important;
    }
    @media (hover:hover)
    {
        &:hover,
        &:focus
        {
            box-shadow:0px 0px 0px 3px var(--d-Themes-4);

        }
    }

}

.content
{
    overflow:hidden;
    background:var(--d-Themes-2);
    color:var(--d-Themes-9);
    padding:var(--paddingBig);
    margin:auto;
    width:100%;
    height:100%;
    overflow:auto;
    box-sizing:border-box;
    .center
    {
        text-align:center;
    }
    &.only_content
    {
        display:flex;
        flex-direction:column;
        background:var(--d-Themes-1);
        padding:0;
    }
}
.fake_checkbox
{
    position:relative;
    width:20px;
    height:20px;
    flex-shrink:0;
    border-radius:var(--generalRadius);
    background:var(--d-Themes-5);
    .fake_checkbox_span
    {
        display:block;
        position:relative;;
        z-index:1;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        background:var(--d-Themes-3);
        border-radius:var(--generalRadius);
        transition:box-shadow 0.2s ease 0s;
        box-shadow: 0px 0px 0px 1px var(--d-Themes-6);
    }
    .checkbox_value
    {
        cursor:pointer;
        position:absolute;
        top:0%;
        left:0%;
        width:100%;
        height:100%;
        z-index:5;
        opacity:0;
    }
    .checkbox_value:checked ~ .fake_checkbox_span
    {
        background:var(--d-Colors-Primary) url(../img/check.svg) center center / auto 70% no-repeat;
        box-shadow: 0px 0px 0px 1px var(--d-Colors-Primary);
        border-radius:var(--generalRadius);
    }
}
.popin_single_message
{
    padding:60px;
}

.folder_container
{
    position:relative;
    display:flex;
    height:100%;
    overflow:auto;
    .folder_uploading
    {
        display:none;
    }
    &.uploading
    {
        .folder_uploading
        {
            display:flex;
            position:absolute;
            top:0%;
            left:0%;
            width:100%;
            height:100%;
            align-items:center;
            justify-content:center;
            p
            {
                height:75px;
                margin-bottom:80px;
                background:url(../img/loading.gif) 50% 100% / auto 40px no-repeat;
            }

        }
        .folder_left, .folder_right
        {
            opacity:0.3;
            pointer-events:none;
        }
    }
}
.folder_left
{
    height:100%;
    overflow:auto;
    box-sizing:border-box;
    width:15%;
    min-width:300px;
    border-right:1px solid var(--d-Themes-4);
    padding:10px;
}
.folder_right
{
    width:100%;
    height:100%;
    overflow:auto;
    box-sizing:border-box;
    padding:0px;
}