@mixin _closeButtonAtHover() {
  .tabbrowser-tab {
    &:not([visuallyselected]) .tab-close-button {
      visibility: collapse !important;
      opacity: 0;
    }
    &:hover .tab-close-button {
      visibility: visible !important;
      opacity: 1;
    }

    @include Option("userChrome.tab.close_button_at_hover.with_selected") {
      &:not([pinned]):not(:hover) .tab-close-button {
        visibility: collapse !important;
        opacity: 0;
      }
    }
  }
}

#tabbrowser-tabs[closebuttons="activetab"] {
  > #pinned-tabs-container
  > .tabbrowser-tab:not([pinned])
  > .tab-stack
  > .tab-content
  > .tab-close-button:not([selected]),
  > #tabbrowser-arrowscrollbox
  > .tabbrowser-tab:not([pinned])
  > .tab-stack
  > .tab-content
  > .tab-close-button:not([selected]) {
    @include InlineBox(true);
  }

  @include _closeButtonAtHover;
}

@include Option("userChrome.tab.close_button_at_hover.always") {
  @include _closeButtonAtHover;
}

/* Animate */
@include Animate {
  /* Fade out */
  .tabbrowser-tab .tab-close-button {
    transition: opacity 0.1s var(--animation-easing-function) !important;
  }

  /* Fade in */
  .tabbrowser-tab:hover .tab-close-button {
    transition: opacity 0.25s var(--animation-easing-function) !important;
  }
}

/* Closed Button's icon thicker */
.tabbrowser-tab .tab-content > .close-icon {
  list-style-image: url("../icons/dismiss-filled.svg") !important;
}

/* Closed Button's icon larger */
.tab-close-button {
  padding: 6px !important; /* Original: 7px */
}
.tabbrowser-tab:not(:hover, [pinned]) > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 1px !important; /* Original: 0px */
  width: 19px !important; /* Original: 17px */
}

/* Closed Button's padding reduce */
#tabbrowser-tabs[closebuttons="activetab"] .tab-content > .tab-close-button {
  margin-inline-end: calc(
    (var(--inline-tab-padding) / -2) + 2px
  ) !important; /* Original: calc(var(--inline-tab-padding) / -2)*/
  padding: 4px !important; /* Original: 7px */
  width: 20px !important; /* Original: 24px */
  height: 20px !important; /* Original: 24px */
}
#tabbrowser-tabs[closebuttons="activetab"] .tabbrowser-tab:not(:hover) > .tab-stack > .tab-content > .tab-close-button {
  padding-inline-start: 3px !important; /* Original: 0px */
  width: 19px !important; /* Redefine from 19px !important, Original: 17px = (width - padding)  */
}
