.ads-TopBar {
  @apply items-center
    border-b
    border-gray-400
    relative
    h-12
    w-full
    justify-between;
}

.ads-TopBar-left-slot,
.ads-TopBar-middle-slot,
.ads-TopBar-right-slot {
  @apply items-center
    h-full;
}

.ads-TopBar-left-slot {
  @apply pl-8;
}

.ads-TopBar-right-slot {
  @apply pr-8;
}

.ads-TopBar-subnav {
  @apply h-full
    items-end;
}

.ads-TopBar-subnav-item {
  @apply inline
    text-gray-600
    border-b-2
    border-transparent
    pb-3
    mr-7;
}

.ads-TopBar-subnav-item:focus {
  @apply outline-none
    shadow-focus;
}

.ads-TopBar-subnav-item--isActive {
  @apply text-gray-900
    border-brandGreen-400;
}

/* Breadcrumbs */
.ads-TopBar-bc {
  @apply items-center;
}

.ads-TopBar-bc-parent {
  @apply flex
    items-center
    bg-gray-300
    rounded-md
    text-gray-700
    font-medium
    py-2
    px-2
    mr-3;
}

.ads-TopBar-bc-parent.ads-TopBar-bc-parent--link {
  @apply cursor-pointer
    transition
    duration-150;
}

.ads-TopBar-bc-parent-link-icon {
  @apply text-gray-600
    mr-1
    transition
    duration-150;
}

.ads-TopBar-bc-parent--link:hover {
  @apply shadow-buttonSecondary
    text-gray-800;
}

.ads-TopBar-bc-parent--link:focus {
  @apply outline-none
    shadow-focus;
}

.ads-TopBar-bc-parent--link:hover .ads-TopBar-bc-parent-link-icon {
  @apply text-gray-700;
}

.ads-TopBar-bc-page-title,
.ads-TopBar-bc-page-subtitle {
  @apply text-gray-800
    mr-2;
}

.ads-TopBar-bc-page-title {
  @apply font-medium;
}