/*---------------------------------------------------------------------------------------------
 * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
 * See LICENSE.md in the project root for license terms and full copyright notice.
 *--------------------------------------------------------------------------------------------*/
@import "~@itwin/core-react/lib/cjs/core-react/geometry";
@import "~@itwin/core-react/lib/cjs/core-react/typography";

@mixin nz-tab-bar {
  $bar-size: 2px;

  &:after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    top: $bar-size;
    left: 0;
    background: var(--iui-color-text-accent);
    padding-left: $bar-size;
    padding-right: $bar-size;
    box-sizing: border-box;
    background-clip: content-box;
  }
}

.nz-footer-messageCenter-tab {
  min-width: 40px;
  min-height: 38px;
  box-sizing: border-box;
  cursor: pointer;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--iui-color-text);

  &:not(.nz-active) {
    border-bottom: 1px solid var(--iui-color-border);
    background-color: var(--iui-color-background-backdrop);
  }

  &:hover {
    @include nz-tab-bar;
  }

  &.nz-active {
    color: var(--iui-color-text-accent);

    @include nz-tab-bar;
  }

  &:not(:first-child) {
    border-left: 1px solid var(--iui-color-border);
  }

  &:focus {
    outline: none;
  }
}