/** 
* 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 */

  &.fullscreen {
    #main,
    .inner {
      padding-top: 0;
    }
  }

  &:not(.fullscreen) {
    &:has(#panels-container.left.icons) #webpage-stack {
      margin-left: 0;
    }
    &:has(#panels-container.left > .SlideBar) #webpage-stack {
      margin-left: 3px;
    }
    &:has(#panels-container.right.icons) #webpage-stack {
      margin-right: 0;
    }
    &:has(#panels-container.right > .SlideBar) #webpage-stack {
      margin-right: 0;
    }

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

      margin-left: calc(var(--edge-like-border-radius) / 2);
      margin-top: calc(var(--edge-like-border-radius) / 2);
      margin-bottom: calc(var(--edge-like-border-radius) / 2);

      &::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: 4;
        pointer-events: none;
      }
    }

    #switch {
      margin-bottom: calc(var(--edge-like-border-radius) / 2);
      margin-top: calc(var(--edge-like-border-radius) / 2);
    }

    #panels-container {
      border-color: var(--colorAccentBg) !important;

      &:not(.icons):not(.overlay) .panel-group {
        border-right: none;

        .panel-collapse-guard {
          border-radius: var(--edge-like-border-radius);
        }
      }

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

    .panel-group {
      transition:
        border-right 0.5s ease,
        width var(--duration) ease-out !important;
      margin-bottom: calc(var(--edge-like-border-radius) / 2);
      margin-top: calc(var(--edge-like-border-radius) / 2);

      &::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;
      }
    }

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

.fullscreen-listener-enabled #browser:not(.fullscreen) {
  #webpage-stack {
    margin: calc(var(--edge-like-border-radius) / 2) !important;
  }

  #switch {
    margin-top: calc(var(--edge-like-border-radius) / 2);
  }
}
