/* stylelint-disable no-descending-specificity */

.root {
  font-family: var(--fontFamily);
  font-weight: var(--fontWeight);
  line-height: var(--lineHeight);
  font-size: var(--fontSize);
  cursor: pointer;
  user-select: none;

  &[aria-selected],
  &[aria-disabled] {
    cursor: default;
  }

  &[aria-disabled] {
    opacity: 0.5;
  }

  &:focus {
    outline: none;
  }
}

.default,
.secondary {
  white-space: nowrap;
}

.secondary {
  box-sizing: border-box;
  padding: 0.7em 1em;
  color: var(--secondaryColor);
  margin-inline-end: 0.2em;
  margin-bottom: -0.0625rem; /* To overlay Tab over TabPanel top border */
  border: 0.0625rem solid transparent;
  border-top-left-radius: 0.1875rem; /* stylelint-disable-line property-blacklist */
  border-top-right-radius: 0.1875rem; /* stylelint-disable-line property-blacklist */

  &:first-of-type {
    margin-inline-start: 0;
  }

  &:not([aria-selected]):not([aria-disabled]):hover,
  &[aria-selected] {
    background: var(--secondarySelectedBackground);
    border-color: var(--secondarySelectedBorderColor);
  }

  &:hover,
  &[aria-selected],
  &[aria-disabled] {
    color: var(--secondarySelectedColor);
  }

  &[aria-selected] {
    z-index: var(--zIndex);
    border-bottom-color: var(--secondarySelectedBackground);
  }
}

@keyframes selectedTab {
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scaleX(1);
  }
}

.default {
  padding: 1rem 1.25rem;
  line-height: 1;
  position: relative;
  z-index: var(--zIndex);
  color: var(--defaultColor);

  &::after {
    content: "";
    height: 0.25rem;
    width: 100%;
    position: absolute;
    inset-inline-start: 0;
    bottom: -0.0625rem;

    /* rules to animate from */
    opacity: 0;
    transform: translate3d(0, 0, 0) scaleX(0.01);
  }

  &[aria-disabled] {
    font-weight: normal;
  }

  &:not([aria-selected]):not([aria-disabled]):hover {
    border-bottom-color: var(--defaultHoverBorderColor);
  }

  &[aria-selected]::after {
    animation-name: selectedTab;
    animation-duration: 0.2s;
    animation-fill-mode: forwards;
    animation-timing-function: ease-out;
    background-color: var(--defaultSelectedBorderColor);
  }
}

/* stylelint-enable no-descending-specificity */