.tab-content {
  position: relative !important;
  overflow: hidden !important;
  align-items: center !important;

  &::before,
  &::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    background-color: get-var("tab-separator-color") !important;
    width: 1px !important;
    height: 20px !important;
    top: unset !important;
    transform: translateY(0%) !important;
    opacity: 0 !important;
    border: none !important;

    transition-property: opacity !important;
    transition-duration: get-var("medium-short-duration") !important;
    transition-timing-function: get-var("point-to-point") !important;
  }

  &::before {
    left: 0 !important;
  }

  &::after {
    right: 0 !important;
  }
}

// hide tab separators if hover or selected
[dir="ltr"] {
  .tabbrowser-tab:is([visuallyselected], [selected])[style*="transform"]
    + .tabbrowser-tab[style*="transform"]
    .tab-content::after,
  .tabbrowser-tab[style*="transform"]:not(:is([visuallyselected], [selected]))
    .tab-content::before,
  .tabbrowser-tab[style*="transform"]
    + .tabbrowser-tab:not(:is([visuallyselected], [selected]))
    .tab-content::before,
  .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not(
      [multiselected]
    )
    + .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not(
      [multiselected]
    )
    .tab-content::before,
  #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow])
    .tabbrowser-tab[last-visible-tab]:not(
      :is([visuallyselected], [selected])
    ):not(:hover):not([multiselected])
    .tab-content::after {
    opacity: var(--tab-separator-opacity) !important;
  }
}

[dir="rtl"] {
  .tabbrowser-tab:is([visuallyselected], [selected])[style*="transform"]
    + .tabbrowser-tab[style*="transform"]
    .tab-content::before,
  .tabbrowser-tab[style*="transform"]:not(:is([visuallyselected], [selected]))
    .tab-content::after,
  .tabbrowser-tab[style*="transform"]
    + .tabbrowser-tab:not(:is([visuallyselected], [selected]))
    .tab-content::after,
  .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not(
      [multiselected]
    )
    + .tabbrowser-tab:not(:is([visuallyselected], [selected])):not(:hover):not(
      [multiselected]
    )
    .tab-content::after,
  #tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow])
    .tabbrowser-tab[last-visible-tab]:not(
      :is([visuallyselected], [selected])
    ):not(:hover):not([multiselected])
    .tab-content::before {
    opacity: var(--tab-separator-opacity) !important;
  }
}

// #tabbrowser-tabs[overflow]
//   .tabbrowser-tab[pinned]
//   + .tabbrowser-tab:not([pinned])
//   .tab-content::before {
//   opacity: 0 !important;
// }

// disable hover transition for selected tab
.tabbrowser-tab:is([visuallyselected], [selected]) {
  --tab-transition-duration: 0s !important;
}
