@layer components {
  /* Mind tabs navigation */
  .mind-tabs__nav {
    display: flex;
    gap: var(--inline-space-half);
    border-block-end: var(--border);
    overflow-x: auto;
  }

  .mind-tabs__tab {
    display: flex;
    align-items: center;
    gap: 0.3em;
    padding: var(--block-space-half) var(--inline-space-half);
    color: var(--color-ink-medium);
    text-decoration: none;
    font-size: var(--text-small);
    font-weight: 500;
    white-space: nowrap;
    border-block-end: 2px solid transparent;
    transition: color 100ms, border-color 100ms;

    &:hover {
      color: var(--color-ink);
    }

    &.active {
      color: var(--color-link);
      border-block-end-color: var(--color-link);
    }
  }

  /* Mind page header */
  .mind-header {
    display: flex;
    align-items: center;
    margin-block-end: var(--block-space-double);
  }

  .mind-header__info {
    display: flex;
    align-items: center;
    gap: var(--inline-space);
  }

  .mind-header__icon {
    font-size: var(--text-x-large);
    color: var(--color-link);
  }

  .mind-header__subtitle {
    color: var(--color-ink-medium);
    font-size: var(--text-small);
  }
}