#TabsToolbar {
  --uc-tab-corner-rounding: 3px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
  --uc-tab-corner-padding: 0px;
  --uc-tab-corner-position: calc(var(--uc-tab-corner-padding) - var(--uc-tab-corner-rounding));

  --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left.svg");
  --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right.svg");
}

:root:not([customizing="true"]) {
  .tabbrowser-tab {
    .tab-background {
      &::before,
      &::after {
        /* Box */
        display: block;
        position: absolute;
        z-index: 1;
        bottom: 0;

        /* Shape */
        width: var(--uc-tab-corner-rounding);
        height: 100%;

        /* Color */
        fill: transparent;
        stroke: transparent;
        -moz-context-properties: fill, stroke;

        /* Image */
        background-size: var(--uc-tab-corner-rounding);
        background-repeat: no-repeat;
        background-position-y: bottom;

        @include Option("userChrome.tab.bottom_rounded_corner.all") {
          content: "";
        }
        @include NotOption("userChrome.tab.color_like_toolbar") {
          /* Based on tab background
            background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none);

            defaults
            background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
            background-image: var(--tab-selected-bgimage, var(--toolbar-bgimage));
         */
          fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
        }
      }

      &::before {
        left: var(--uc-tab-corner-position);
        background-image: var(--uc-tab-corner-left-side-svg);
      }
      &::after {
        right: var(--uc-tab-corner-position);
        background-image: var(--uc-tab-corner-right-side-svg);
      }
    }

    &[visuallyselected] .tab-background {
      &::before,
      &::after {
        @include NotOption("userChrome.tab.bottom_rounded_corner.all") {
          content: "";
        }

        fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
        stroke: var(
          --tab-line-color,
          var(--tabs-border-color, rgba(128, 128, 142, 0.9))
        );
      }
    }
    &[multiselected] .tab-background {
      &::before,
      &::after {
        fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
      }
    }
    &:hover:not([visuallyselected], [multiselected]) .tab-background {
      &::before,
      &::after {
        fill: color-mix(in srgb, currentColor 11%, transparent);
      }
    }
  }
  @include Option("userChrome.tab.multi_selected") {
    .tabbrowser-tab[multiselected]:not([visuallyselected]) .tab-background {
      &::before,
      &::after {
        fill: color-mix(in srgb, currentColor 65%, transparent);
        opacity: 0.3;
      }
    }
  }

  &::is([lwtheme-mozlightdark], [style*="--lwt-accent-color: rgb(28, 27, 34); --lwt-text-color: rgba(251, 251, 254);"])#{$lwtheme}
    #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected] .tab-background {
      &::before,
      &::after {
        /* As Selected Tab - Box Shadow */
        stroke: var(--toolbar-color);
      }
  }

  @include OS($linux) {
    /* Fill color for GTK */
    &:not([lwtheme="true"]) {
      .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background {
        &::before,
        &::after {
          /* As GTK Toolbar's background-color + background-image
           * --toolbar-non-lwt-bgcolor: -moz-dialog;
           * --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
           */
          fill: color-mix(in srgb, rgb(255, 255, 255) 15%, -moz-dialog);
          stroke: transparent;
          opacity: 1;
        }
      }
      #TabsToolbar[brighttext] .tabbrowser-tab[visuallyselected] .tab-background {
        &::before,
        &::after {
          stroke: transparent;
        }
      }
    }
  }
}
