.funkwhale {
  &.tabs {
    color: var(--fw-text-color);

    @include light-theme {
      --fw-border-color: var(--fw-gray-300);
    }

    @include dark-theme {
      --fw-text-color: var(--fw-gray-300);
      --fw-border-color: var(--fw-gray-700);
    }

    > .tabs-header {
      display: flex;
      align-items: end;
      padding-bottom: 0px;
      margin-bottom: 23px;
      border-bottom: 1px solid var(--fw-border-color);

      &:has(:focus-visible) {
        outline:1px dotted currentColor;
      }

      > .tabs-item {
        font-size: 1rem;
        padding: 8px;
        min-width: 96px;
        text-align: center;
        cursor: pointer;
        position: relative;

        .is-spacing {
            height: 0;
            visibility: hidden;
        }
        .is-icon {
          display: block;
          position: relative;
          transform: translateY(-.5rem);
          font-size: 1.5em;
          color: var(--fw-gray-500);
        }

        &.is-active, .is-spacing {
          font-weight: 900;

          &::after {
            content: '';
            display: block;
            height: 4px;
            background-color: var(--fw-secondary);
            margin: 0 auto;
            width: calc(10% + 2rem);
            position: absolute;
            inset: auto 0 -2.5px 0;
            border-radius: 100vh;
          }
        }
      }

      > .tabs-right {
        margin-left: auto;
      }
    }
  }
}