@import url("../overwrites.css");
/*== ShyFox Sidebery ===============================================================================================================================

Styles for Sidebery extension


--- VARIABLES ---------------------------------------------------------------------------------------------------------------------------------------

*/

@-moz-document regexp("^moz-extension://.*?/sidebar/sidebar.html")
{
  /* wrap start */

  #root.root {
    --general-border-radius: var(--tf-rounding) !important;
    --general-margin: 8px !important;
    --tabs-font: var(--tf-font-size) var(--tf-font-family) !important;

    --button-size: 35px;
    --pin-favicon-size: 30px;

    --nav-btn-margin: calc(var(--tf-margin) / 2) !important;
    --nav-btn-width: var(--button-size) !important;
    --nav-btn-height: var(--button-size) !important;
    --nav-btn-len-margin: calc(var(--tf-rounding) / 4) !important;

    --audio-btn-round-margin: calc(var(--tf-rounding) / 2) !important;

    --tabs-audio-btn-width: 22px !important;
    --tabs-margin: 6px !important;
    --tabs-height: var(--button-size) !important;
    --tabs-inner-gap: calc(var(--tf-margin) / 2) !important;
    --tabs-border-radius: var(--tf-rounding) !important;

    --frame-el-overlay-selected-border: var(--s-toolbar-fg) !important;
    --frame-el-overlay-hover-bg: color-mix(
      in hsl,
      currentColor 4%,
      var(--toolbar-bg)
    ) !important;
    --toolbar-el-overlay-selected-border: var(--s-toolbar-fg) !important;
    --status-notice: var(--s-toolbar-fg) !important;
  }

  /*
   * ─[ pinned tabs ]──────────────────────────────────────────────────────
  */

  /* size calculation */
  .PinnedTabsBar .tab-wrapper .Tab {
    --n: 3;
    --m: 1;

    width: calc(
      100vw / var(--n) - var(--tabs-margin) * (1 / var(--n) + 1)
    ) !important;

    height: calc(((100vw - var(--tabs-margin)) / 3.6) / var(--m)) !important;
  }

  /* full-width titles */
  #root[data-pinned-tabs-list="true"] .PinnedTabsBar .tab-wrapper .Tab {
    --n: 1 !important;
    --m: 1.4 !important;
  }

  /* 1 pinned tab */
  .PinnedTabsBar .tab-wrapper:nth-child(1):last-child .Tab {
    --n: 1;
    --m: 1.4;
  }

  /* 2 tabs in bottom row */
  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 2):last-child)
    .tab-wrapper:nth-last-child(-n + 2)
    .Tab {
    --n: 2;
    --m: 1.2;
  }

  /* 4 tabs in bottom row */
  .PinnedTabsBar:has(.tab-wrapper:nth-child(3n + 4):last-child)
    .tab-wrapper:nth-last-child(-n + 4)
    .Tab {
    --n: 4;
    --m: 1.3;
  }

  /* audio icon */
  .Tab[data-pin="true"] > .body > .audio {
    background: transparent !important;
    box-shadow: none !important;
    right: var(--audio-btn-round-margin) !important;
    top: var(--audio-btn-round-margin) !important;
  }

  /* bigger favicon */
  .Tab[data-pin="true"] :is(.fav, .fav-icon) {
    width: var(--pin-favicon-size) !important;
    height: var(--pin-favicon-size) !important;
  }

  /* shadow, outline and background */
  .Tab[data-pin="true"] .body {
    background-color: var(--toolbar-bg) !important;
  }

  /* remove bottom margin */
  .PinnedTabsBar {
    margin-bottom: 0px !important;
  }

  /*
   * ─[ general tab stuff ]────────────────────────────────────────────────
  */
  .Tab[data-active="true"] .body {
    box-shadow: none !important;
    background-color: color-mix(
      in hsl,
      currentColor 8%,
      var(--toolbar-bg)
    ) !important;

    & .title {
      color: var(--s-popup-fg) !important;
    }
  }

  .Tab .body {
    text-transform: var(--tf-text-transform);
    & .title {
      color: color-mix(in hsl, var(--s-popup-fg) 50%, transparent) !important;
    }
  }

  /*
   * ─[ other ]────────────────────────────────────────────────────────────
  */

  /* consistent navbar background */
  #nav_bar {
    background-color: transparent !important;
  }

  /* padding */
  #nav_bar {
    padding-top: var(--nav-btn-margin) !important;
    padding-bottom: var(--general-margin) !important;
  }

  .BottomBar {
    padding: var(--nav-btn-margin) !important;
  }

  /* popup */
  .popup {
    margin: var(--tabs-margin) !important;
  }
  .popup-container {
    background-color: transparent !important;
  }

  /* search */
  #search_bar {
    margin: 4px !important;
  }
  #search_bar[data-showed="false"] {
    display: none !important;
  }
  #search_bar .clear-btn {
    margin-inline-end: var(--general-margin);
  }

  .NavigationBar {
    box-shadow: none !important;
  }

  /* accent colored selection */
  ::selection {
    background: color-mix(
      in hsl,
      var(--s-toolbar-fg) 20%,
      transparent
    ) !important;
  }

  /* notification */
  .notification {
    border-radius: var(--tf-rounding) !important;
    &::after {
      top: calc(var(--tf-rounding) / 4 + 3px) !important;
      right: calc(var(--tf-rounding) / 4 + 3px) !important;
    }
  }
} /* wrap end */