/* Edge-Frfox - sidebery.css
 * https://github.com/bmFtZQ/edge-frfox
 */

/* This file needs to loaded into userContent.css so the @media rules can be
 * used for automatic tweaks configuration. */

/* Since the UUIDs are randomly generated, only a generic path can be specified,
 * this can cause conflicts with other extensions that use the same file
 * structure, but is unlikely to cause any major issues. */
@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html") {
  /* Fix issues with rounded corners rendering. */
  :root {
    color-scheme: light dark !important;
    background: light-dark(#aaa, #222) !important;
  }

  /* On macOS, ensure that text is rendered correctly. */
  body {
    -moz-osx-font-smoothing: auto !important;
  }

  /*
    MARK: Default theme colours
  */

  /* macOS light mode. */
  body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"],
  /* macOS dark mode. */
  body[style*="--s-frame-fg: rgba(255, 255, 255, 0.847)"],
  /* Windows light mode. */
  body[style*="--s-frame-bg: rgb(240, 240, 240)"],
  /* Windows dark mode. */
  body[style*="--s-frame-bg: rgb(35, 34, 43)"],
  /* No theme enabled. */
  body:not([style*="--s-frame-bg"]) {
    --s-frame-bg: light-dark(#cecece, #1C1C1C) !important;
    --s-frame-fg: light-dark(#000, #FFF) !important;
    --s-toolbar-bg: light-dark(#f7f7f7, #3B3B3B) !important;
    --s-toolbar-fg: light-dark(#252525, #fff) !important;
    --s-act-el-bg: light-dark(#fff, #4D4D4D) !important;
    --s-act-el-fg: light-dark(#000, #fff) !important;
    --s-act-el-border: transparent !important;
    --s-popup-bg: light-dark(#fff, #4A4A4A) !important;
    --s-popup-fg: light-dark(#1c1c1c, #fff) !important;
    --s-popup-border: light-dark(#dadada, #636363) !important;
    --s-accent: light-dark(#0078D4, #63ADE5) !important;
  }

  /* Linux/GTK support, side effect: Firefox themes do not work. */
  @media (-moz-gtk-csd-available) {
    body:not([style*="--s-frame-bg"]) {
      --s-frame-bg: light-dark(color-mix(in srgb, ActiveCaption 90%, black), ActiveCaption) !important;
      --s-frame-fg: CaptionText !important;
      --s-toolbar-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 92%, white)) !important;
      --s-toolbar-fg: -moz-dialogtext !important;
      --s-act-el-bg: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 80%, white)) !important;
      --s-act-el-fg: -moz-dialogtext !important;
      --s-act-el-border: transparent !important;
      --s-popup-bg: Field !important;
      --s-popup-fg: FieldText !important;
      --s-popup-border: light-dark(transparent, color-mix(in srgb, currentColor 17%, Field)) !important;
      --s-accent: AccentColor !important;
    }
  }

  /*
    MARK: Variables
  */
  #root.root {
    --frame-bg: var(--s-toolbar-bg) !important;
    --frame-fg: var(--s-toolbar-fg) !important;
    --general-margin: 4px !important;
    --tabs-font: 12px system-ui !important;
    --tabs-height: 32px !important;
    --tabs-pinned-width: 32px !important;
    --tabs-pinned-height: 32px !important;
    --tabs-close-btn-margin: 8px !important;
    --ntb-btn-height: 32px !important;
    --tabs-inner-gap: 8px !important;
    --tabs-border-radius: 4px !important;
    --general-border-radius: 4px !important;
    --tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / .18), 0 0px 2px rgb(0 0 0 / .19) !important;
    --tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 87%, transparent) !important;
    --nav-btn-height: 32px !important;
    --nav-btn-width: 32px !important;
    --separator-color: color-mix(in srgb, var(--frame-fg) 20%, transparent) !important;
    --nav-btn-active-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.086), inset 0 1px 3px 0 rgb(0 0 0 / 0.086) !important;

    /* Light mode adjustments. */
    &[data-frame-color-scheme="light"] {
      color-scheme: light !important;
      --tabs-normal-fg: color-mix(in srgb, var(--frame-fg) 82%, transparent) !important;
    }

    /* Dark mode adjustments. */
    &[data-frame-color-scheme="dark"] {
      color-scheme: dark !important;
      --tabs-activated-shadow: 0 4px 4px rgb(0 0 0 / .44), 0 0px 2px rgb(0 0 0 / .47) !important;
      --nav-btn-active-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.071), 0 1px 3px 0 rgb(0 0 0 / 0.212) !important;
    }

    @media (-moz-bool-pref: "uc.tweak.rounded-corners") {
      --tabs-border-radius: 8px !important;
    }
  }

  /*
    MARK: Floating tabs vars
  */
  @media (-moz-bool-pref: "uc.tweak.floating-tabs") {
    body[style*="--s-frame-fg: rgba(0, 0, 0, 0.847)"],
    body[style*="--s-frame-fg: rgba(255, 255, 255, 0.847)"],
    body[style*="--s-frame-bg: rgb(240, 240, 240)"],
    body[style*="--s-frame-bg: rgb(35, 34, 43)"],
    body:not([style*="--s-frame-bg"]) {
      --s-frame-bg: light-dark(#f3f3f3, #202020) !important;
      --s-act-el-bg: light-dark(#fff, #3F3F3F) !important;
      --s-act-el-border: light-dark(transparent, rgb(255 255 255 / 0.06)) !important;
    }

    #root.root {
      --frame-bg: var(--s-frame-bg) !important;
      --frame-fg: var(--s-frame-fg) !important;

      --toolbar-bg: var(--s-frame-bg) !important;
      --toolbar-fg: var(--s-frame-fg) !important;
      --s-toolbar-bg: light-dark(#f3f3f3, #202020) !important;
      --tabs-activated-shadow: 0 2.5px 3px 1px rgb(0 0 0 / .08), 0 0 0 1px rgb(0 0 0 / .11) !important;
      --tabs-border-radius: 8px !important;

      &[data-frame-color-scheme="dark"] {
        --tabs-activated-shadow: 0 2px 3px rgb(0 0 0 / .12) !important;
      }
    }
  }

  /*
    MARK: Tabs appearance
  */
  .Tab {
    /* Active tab border. */
    &[data-active="true"] .body {
      outline: 1px solid var(--s-act-el-border, transparent) !important;
      outline-offset: -1px !important;
    }

    /* Close button border radius. */
    & .close {
      border-radius: 4px !important;
    }

    /* Make sure that tab icons use full opacity. */
    & .fav svg {
      opacity: 1 !important;
    }

    /* Adjust spacing between tab icons and labels. */
    & .title {
      padding-inline: 0 !important;
    }

    /* Colourised tab shadow and outline. */
    &[data-colorized="true"] {
      --tabs-activated-shadow: unset !important;
      --s-act-el-border: light-dark(rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.25)) !important;
    }

    & .ctx {
      box-shadow: none !important;
      border-radius: 2px !important;
      --uc-margin: 8px !important;
      --uc-width: 2px !important;
      --uc-offset: 1px !important;
    }

    &[data-active="true"] .ctx {
      --uc-margin: 6px !important;
    }

    &[data-pin="false"] {
      /* Inner spacing for tabs. */
      & .fav {
        margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important;
      }

      /* Tab container indicator. */
      & .ctx {
        inset-block: 0 !important;
        margin-block: auto !important;
        left: var(--uc-offset) !important;
        width: var(--uc-width) !important;
        height: calc(100% - var(--uc-margin) * 2) !important;
      }
    }

    #root[data-pinned-tabs-position="panel"] &[data-pin="true"] {
      /* Tab container indicator. */
      & .ctx {
        inset-inline: 0 !important;
        margin-inline: auto !important;
        bottom: var(--uc-offset) !important;
        height: var(--uc-width) !important;
        width: calc(100% - var(--uc-margin) * 2) !important;
      }
    }
  }

  .Notifications + .main-box .central-box {
    height: 100% !important;
    margin-top: 0 !important;
  }

  /* Add space to the top of the tabs to allow shadows to be visible. */
  .AnimatedTabList,
  .PinnedTabsBar {
    padding-top: var(--tabs-margin) !important;
  }

  /* Remove space between the tabs and horizontal navigation bar, as tabs have
   * their own space applied for the shadows. */
  .top-horizontal-box {
    margin-bottom: 0 !important;

    & .NavigationBar.-top {
      padding-block-end: 0 !important;
    }
  }

  /* Pinned tabs separator. */
  .PinnedTabsBar {
    /* Pinned tab grid. */
    #root[data-pinned-tabs-position="panel"] & {
      padding-bottom: calc(var(--tabs-margin) + 1px) !important;
    }

    /* Pinned tab list. */
    #root[data-pinned-tabs-position="panel"][data-pinned-tabs-list="true"] & {
      padding-bottom: 1px !important;
    }

    /* Separator element. */
    &::after {
      display: unset !important;
      bottom: 0 !important;
      height: auto !important;
      border-bottom: 1px solid var(--separator-color) !important;
      background: transparent !important;
      opacity: 1 !important;
    }
  }

  /*
    MARK: New tab button
  */
  .TabsPanel .new-tab-btns {
    /* Add space for the separator. */
    padding-top: calc(var(--tabs-margin) + 1px) !important;

    /* Add separator before new tab button. */
    &::before {
      width: calc(100% - var(--tabs-margin)*2) !important;
      inset-inline: auto !important;
      top: 0 !important;
      border-top: 1px solid var(--separator-color) !important;
      box-shadow: none !important;
    }

    /* Make sure the separator is hidden when there are only pinned tabs. */
    &[data-new-tab-bar-position="after_tabs"]:first-child {
      padding-top: 0 !important;

      &::before {
        display: none !important;
      }
    }

    /* Hide unnecessary pseudo element. */
    &::after {
      content: initial !important;
    }

    /* New tab button. */
    & .new-tab-btn {
      justify-content: start !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      border-radius: var(--tabs-border-radius) !important;

      /* Make sure images do not shrink when collapsed. */
      & > svg,
      & > img {
        position: static !important;
        margin: 0 calc(var(--tabs-inner-gap) + 2px) 0 var(--tabs-inner-gap) !important;
        flex-shrink: 0 !important;
      }

      /* Fix new tab icon when badge is placed above it (open in container). */
      & > .-badge {
        position: static !important;
        margin-top: 10px !important;
        margin-inline-start: calc(-1 * (14px + var(--tabs-inner-gap) / 2)) !important;
        margin-inline-end: calc(var(--tabs-inner-gap) - 1px) !important;
      }

      /* Add new tab label. */
      &::after {
        content: "New Tab" !important;
        font: var(--tabs-font) !important;
        color: var(--frame-fg) !important;
      }
    }
  }

  /* Hide shadows at the top and bottom when scrolling. */
  .ScrollBox > .top-shadow[data-show="true"],
  .ScrollBox > .bottom-shadow[data-show="true"] {
    display: none !important;
  }

  /*
    MARK: Icons
  */

  /* New tab page icon. */
  #icon_ff path {
    d: path("M3 1h10a2 2 0 01 2 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V3a2 2 0 01 2-2zm3 1H3a1 1 0 00-1 1v10a1 1 0 00 1 1h10a1 1 0 00 1-1V5H7.5A1.5 1.5 0 01 6 3.5zm1 0v1.5a.5.5 0 00 .5.5H14V3a1 1 0 00-1-1zM5 8a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2zm3 0a1 1 0 01 0 2 1 1 0 01 0-2z") !important;
  }

  /* Plus icon. */
  #icon_plus path {
    d: path("M7 1a.5.5 0 01 1 0v6h6a.5.5 0 01 0 1H8v6a.5.5 0 01-1 0V8H1a.5.5 0 01 0-1h6z") !important;
  }
}