html,
body {
  --tab-min-height: 34px !important; // 34px (real height)

  // custom tab variables
  --tab-opacity: 0;
}

.tabbrowser-tab {
  overflow: visible !important;
  border: 0 !important;
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
  appearance: none !important;
  position: relative !important;
  box-sizing: border-box !important;
  background: 0 0 !important;
  padding: 0 !important;
  font-size: 12px !important;

  &:not([pinned]) {
    margin-inline-start: 0 !important;
  }
}

// hide tab bottom additional text
.tab-secondary-label {
  display: none !important;
}

// tab label margin from icon
.tab-label {
  margin-left: 8px !important;
}

[dir="rtl"] {
  .tab-label {
    margin-left: unset !important;
    margin-right: 8px !important;
  }
}

// selected and not selected tab text color
@include moz-pref-media("not userChrome.theme-default") {
  .tabbrowser-tab {
    &:not(:is([visuallyselected], [selected])) {
      color: get-var("tab-label-color-inactive") !important;
    }

    &:is([visuallyselected], [selected]) {
      color: get-var("tab-label-color") !important;
    }

    &:hover {
      color: get-var("tab-label-color") !important;
    }
  }
}

// hide tab text and close button if pinned tab
.tabbrowser-tab[pinned] {

  .tab-label-container,
  .tab-close-button {
    display: none !important;
  }
}

// styles for pinned tab
.tabbrowser-tab[pinned] {
  max-width: 40px !important;
  min-width: 40px !important;
  padding: 0 !important;

  .tab-icon-stack {
    margin-left: 0 !important;
  }

  .tab-content {
    display: grid !important;
    align-content: center !important;
    place-content: center !important;
    place-items: center !important;
    justify-content: center !important;
  }
}

.tab-stack {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.tab-icon-overlay {
  margin: 0 !important;
  padding: 0 !important;
}

.tab-close-button,
.tab-icon-image,
.tab-icon-sound,
.tab-sharing-icon-overlay,
.tab-throbber,
.tab-throbber-fallback {
  margin-top: 0 !important;
}

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  display: none !important;
}

// general tab background styles with tab corners
.tab-background {
  margin-block: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  position: relative !important;
  border: 0 !important;
  // outline: 0 !important;

  opacity: var(--tab-opacity) !important;
  visibility: visible !important;
  box-shadow: none !important;

  transition-property: opacity, background-color !important;
  transition-duration: get-var("shortest-duration") !important;
  transition-timing-function: get-var("fade-in-out") !important;

  &::before,
  &::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    min-width: 8px !important;
    max-width: 8px !important;
    min-height: 8px !important;
    max-height: 8px !important;
    bottom: 0 !important;
    pointer-events: none !important;
    clip-path: inset(0px) !important;

    transition-property: box-shadow !important;
    transition-duration: get-var("shortest-duration") !important;
    transition-timing-function: get-var("fade-in-out") !important;

    background-image: none !important; // remove tab image for waterfox
  }

  &::before {
    border-bottom-right-radius: 8px !important;
    left: 0 !important;
    transform: translateX(-8px) !important;
    box-shadow: 4px 4px 0 4px var(--tab-selected-bgcolor) !important;
  }

  &::after {
    border-bottom-left-radius: 8px !important;
    right: 0 !important;
    transform: translateX(8px) !important;
    box-shadow: -4px 4px 0 4px var(--tab-selected-bgcolor) !important;
  }
}

@include moz-pref-media("not userChrome.theme-default") {

  html,
  body {
    --tab-background-color: #{get-var("background-color-100")} !important;
  }

  // general tab background styles with tab corners
  .tab-background {
    background: var(--tab-background-color) !important;

    &::before {
      box-shadow: 4px 4px 0 4px var(--tab-background-color) !important;
    }

    &::after {
      box-shadow: -4px 4px 0 4px var(--tab-background-color) !important;
    }
  }

  .tabbrowser-tab:is([visuallyselected], [selected]) {
    --tab-background-color: var(--toolbar-bgcolor) !important;
  }
}

// hover bg opacity for not selected tab
.tabbrowser-tab:not([selected="true"]):hover,
.tabbrowser-tab[multiselected]:not([selected="true"]) {
  --tab-opacity: #{get-var("tab-opacity-hover")} !important;
}

// bg color and opacity for selected tab
.tabbrowser-tab:is([visuallyselected], [selected]) {
  --tab-opacity: #{get-var("tab-opacity")} !important;
}

.tab-icon-image {
  margin: 0 !important;
}

.tabbrowser-tab[fadein] {
  .tab-close-button {
    visibility: visible !important;
  }
}

.tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
  max-width: 238px !important;
}

#tabs-newtab-button {
  margin-inline-start: 6px !important;
  margin-inline-end: 2px !important;
}

#tabbrowser-tabs[overflow] {
  .tabbrowser-tab[last-visible-unpinned-tab] {
    margin-inline-end: 8px !important;
  }

  .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 8px !important;
  }
}

// tabs top margin if window not maximized
#main-window[sizemode="normal"] #TabsToolbar-customization-target> :not(#alltabs-button) {
  margin-top: 8px !important;
}

// tab inline padding
.tab-content {
  padding: 0 12px !important;
}

// fix first tab margin
#tabbrowser-arrowscrollbox .tabbrowser-tab:is(:first-child) {
  margin-left: 8px !important;
}

// fix pinned tabs position for overflow mode
#tabbrowser-tabs[overflow] {
  .tabbrowser-tab:is([pinned], [first-visible-unpinned-tab]) {
    margin-inline-start: 0 !important;
  }
}

// fix for prev style, if no pinned tabs - restore margin to prevent left tab corner cropping
#tabbrowser-tabs:not([haspinnedtabs]) {
  .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 8px !important;
  }
}

// remove left title bar drag area
#tabbrowser-tabs {
  padding-inline: 0 0 !important;
}

// remove unwanted bottom spacing
#tabbrowser-tabs {
  min-height: unset !important;
}

// remove theme tab outline color
#TabsToolbar {
  --lwt-tab-line-color: transparent !important;
}

// fix tab background cropping
.tab-background {
  z-index: 0 !important;

  &::before,
  &::after {
    z-index: 0 !important;
  }
}

.tabbrowser-tab:is([visuallyselected], [selected]) {
  .tab-background {
    z-index: 2 !important;

    &::before,
    &::after {
      z-index: 1 !important;
    }
  }

  .tab-content {
    z-index: 3 !important;
  }
}

// fixes for macOS
@media (-moz-platform: macos) {

  // tabs bar top margin
  #TabsToolbar-customization-target> :not(#alltabs-button) {
    margin-top: 8px !important;
  }

  // bigger font size for tab text
  .tabbrowser-tab {
    font-size: 13px !important;
  }
}