:host {
  @apply inline-block list-none h-full border border-solid border-t-0 border-l-0 border-b border-r text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 flex-grow-0 border z-10;
  background: var(--color-neutral-50);
  color: var(--color-key);
  border-color: var(--color-neutral-200);

  &.isActive {
    background: var(--color-stock);
    border-bottom-color: var(--color-stock);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    &:not(.isActive) {
      background: var(--color-neutral-100);
    }

    stencila-icon {
      @apply opacity-100;
    }
  }

  li {
    @apply flex list-none align-middle flex-row flex-nowrap items-center;
  }

  &.userOS-Linux,
  &.userOS-Windows_NT {
    li {
      @apply flex-row-reverse;
    }
  }
}

stencila-icon {
  @apply opacity-0 rounded-sm mr-1;

  &:hover,
  &:active {
    color: var(--color-neutral-100);
    background: var(--color-neutral-600);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default pr-1;
}

:host {
  @apply inline-block list-none h-full border border-solid border-t-0 border-l-0 border-b border-r text-xs text-center pl-1 pr-4 py-2 leading-none flex-1 flex-grow-0 border z-10;
  background: var(--color-neutral-50);
  color: var(--color-key);
  border-color: var(--color-neutral-200);

  &.isActive {
    background: var(--color-stock);
    border-bottom-color: var(--color-stock);
    box-shadow: inset 0px 3px var(--color-brand);
  }

  & > * {
    @apply align-middle;
  }

  &:hover,
  &:focus {
    &:not(.isActive) {
      background: var(--color-neutral-100);
    }

    stencila-icon {
      @apply opacity-100;
    }
  }

  li {
    @apply flex list-none align-middle flex-row flex-nowrap items-center;
  }

  &.userOS-Linux,
  &.userOS-Windows_NT {
    @apply pr-1 pl-4;

    li {
      @apply flex-row-reverse;
    }
  }
}

stencila-icon {
  @apply opacity-0 rounded-sm mr-1;

  &:hover,
  &:active {
    color: var(--color-neutral-100);
    background: var(--color-neutral-600);
  }
}

a,
a:link,
a:visited {
  @apply block no-underline whitespace-nowrap leading-none text-current flex-grow cursor-default pr-1;
}

Fix spacing around tab close icon on Linux & Windows
fix(Tabs): Fix spacing around tab close icon on Linux & Windows
