/** 
* Edge like border radius
* Forum link: https://forum.vivaldi.net/topic/83618/edge-like-curved-frame-around-website
*/

#browser {
    --edge-like-border-radius: var(--radius); /* 0.5rem */
}

#webpage-stack {
    box-shadow: 0 0 0 var(--edge-like-border-radius) var(--colorAccentBg);

    margin-bottom: calc(var(--edge-like-border-radius) / 2);
    margin-right: calc(var(--edge-like-border-radius) / 2);
}

#browser.fullscreen #webpage-stack {
     margin-left: calc(var(--edge-like-border-radius) / 2);
}

#webpage-stack::before {
    content: '';
    position: absolute;
    width: 100%;    
    height: 100%;   
    border-radius: var(--edge-like-border-radius);
    /* border-top-left-radius: var(--edge-like-border-radius);
    border-bottom-left-radius: var(--edge-like-border-radius);
    border-top-right-radius: var(--edge-like-border-radius);
    border-bottom-right-radius: var(--edge-like-border-radius); */
    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
    z-index: 1;
    pointer-events: none;
}

#browser:not(.fullscreen) #panels-container:not(.icons):not(.overlay) {
    margin-right: calc(var(--edge-like-border-radius) / 4);
    padding-right: calc(var(--edge-like-border-radius) / 4);
}

#panels-container:not(.icons):not(.overlay) .panel-group  {
    border-top-right-radius: var(--edge-like-border-radius);
    border-bottom-right-radius: var(--edge-like-border-radius);
    border-right: none;
}

#panels-container > button.SlideBar {
    background: var(--colorAccentBg);
}

.panel-group {
    transition: border-right 2s ease, width var(--duration) ease-out !important;
}

.panel-group::before {
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;   
    border-top-left-radius: var(--edge-like-border-radius);
    border-bottom-left-radius: var(--edge-like-border-radius);
    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
    z-index: 1;
    pointer-events: none;
}

#panels-container:not(.icons):not(.overlay) .panel-group::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;   
    border-radius: var(--edge-like-border-radius);
    outline: var(--edge-like-border-radius) solid var(--colorAccentBg);
    z-index: 1;
    pointer-events: none;
}

.StatusInfo {
    margin-bottom: calc(var(--edge-like-border-radius) / 2);
    margin-left: calc(var(--edge-like-border-radius) / 2);
}

.panel-group {
    margin-bottom: calc(var(--edge-like-border-radius) / 2);
}