.ads-Appbar {
  @apply bg-gray-900
    text-white
    relative
    h-appbar
    flex
    items-center;
}

.ads-Appbar.isDemoEnvironment::after {
  @apply absolute
    bg-gold-400
    left-0
    origin-top-left
    p-1
    text-center
    text-gray-900
    text-h6
    transform
    -rotate-90;

  content: "DEMO";
  top: 100%;
  width: theme("height.appbar");
}

/* Logo */

.ads-Appbar-logo {
  @apply relative
    items-center
    justify-center
    h-full
    px-8;
}

.ads-Appbar-logoLink {
  @apply flex
    items-center
    justify-center
    h-full
    w-full;
}

.ads-Appbar-logo svg {
  @apply block
    relative;

  top: 1px;
}

/* Menu */

.ads-Appbar-menu,
.ads-Appbar-menu > div {
  @apply h-full;
}

.ads-Appbar-menuButton {
  @apply h-full
    transition-colors
    ease-in-out
    duration-200;
}

.ads-Appbar-menuButton.isOpen,
.ads-Appbar-menuButton:hover,
.ads-Appbar-menuButton:active,
.ads-Appbar-menuButton:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-menuButton[disabled] {
  @apply bg-transparent
    cursor-default;
}

.ads-Appbar-menuButton:focus {
  @apply outline-none;
}

.ads-Appbar-menuList {
  @apply w-64
    pb-2;
}

.ads-Appbar-menuItem {
  @apply flex
    items-center
    w-full
    font-medium
    cursor-pointer
    no-underline
    transition-colors
    ease-in-out
    duration-200
    text-left
    px-2;
}

.ads-Appbar-menuItem:hover,
.ads-Appbar-menuItem:active,
.ads-Appbar-menuItem:focus {
  @apply text-white;

  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-menuItem:focus {
  @apply outline-none;
}

/* Product Menu */

.ads-Appbar-productMenuButton {
  @apply flex
    items-center
    bg-transparent
    text-white
    text-h3
    font-medium
    px-4;
}

.ads-Appbar-productMenuItem {
  @apply text-h3
    text-white
    py-1;
}

/* Tab Marker */

.hasTabMarker {
  @apply overflow-hidden
    relative;
}

.ads-Appbar-tabMarker {
  @apply absolute
    w-full
    bottom-0
    left-0
    bg-brandGreen-400;

  height: 2px;
  transform: translateY(100%);
  transition: transform 0.2s ease;
}

.ads-Appbar-menuButton.isOpen .ads-Appbar-tabMarker,
.ads-Appbar-tab--active .ads-Appbar-tabMarker,
.hasTabMarker:hover .ads-Appbar-tabMarker,
.hasTabMarker:active .ads-Appbar-tabMarker,
.hasTabMarker:focus .ads-Appbar-tabMarker {
  transform: translateY(0);
}

/* Tabs */

.ads-Appbar-tabs {
  @apply flex
    h-full;
}

.ads-Appbar-tab {
  @apply flex
    items-center
    h-full
    px-2
    text-gray-500
    text-body
    ease-all-fast
    no-underline
    cursor-pointer;
}

.ads-Appbar-tab:visited {
  @apply text-gray-500;
}

.ads-Appbar-tab--active,
.ads-Appbar-tab--active:visited,
.ads-Appbar-tab:hover,
.ads-Appbar-tab:active,
.ads-Appbar-tab:focus {
  @apply text-white;

  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-tab:focus {
  @apply outline-none;
}

/* User */

.ads-Appbar-userName {
  @apply items-center
    bg-transparent
    text-white
    text-body
    font-medium
    h-full;
}

.ads-Appbar-user,
.ads-Appbar-userMenuButton {
  @apply px-3
    border-l
    border-gray-800;
}

.ads-Appbar-user {
  @apply h-full
    -mr-3;
}

.ads-Appbar-userMenuItem {
  @apply text-h5
    text-gray-500
    py-2
    px-3;
}

/* Organization */

.ads-Appbar-organizations {
  @apply items-center;
}

.ads-Appbar-organizations .ads-Appbar-organization:not(:last-of-type) {
  @apply mr-4;
}

.ads-Appbar-organization {
  @apply flex
    items-center
    text-gray-500
    rounded
    p-1
    ease-all-fast;
}

.ads-Appbar-organization--switcher {
  @apply cursor-pointer;
}

.ads-Appbar-organization--switcher:hover,
.ads-Appbar-organization--switcher:active,
.ads-Appbar-organization--switcher:focus {
  @apply text-white;
}

.ads-Appbar-organization--switcher:focus {
  @apply outline-none;

  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-organizationLogo {
  @apply items-center
    justify-center
    text-gray-600
    h-6
    w-6
    rounded
    bg-gray-800
    ml-2;
}

.ads-Link.ads-Appbar-orgSwitcherLink {
  @apply p-1
    rounded
    text-brandGreen-300;
}

.ads-Link.ads-Appbar-orgSwitcherLink:hover,
.ads-Link.ads-Appbar-orgSwitcherLink:active,
.ads-Link.ads-Appbar-orgSwitcherLink:focus {
  @apply text-brandGreen-400;
}

.ads-Link.ads-Appbar-orgSwitcherLink:focus {
  @apply outline-none
    shadow-focusBrand;
}

.ads-Appbar-orgOptionButton {
  @apply flex
    items-center
    justify-between
    px-3
    py-4
    w-full
    h-full
    border-b
    border-gray-800
    transition-colors;
}

.ads-Appbar-orgOptionButton:hover,
.ads-Appbar-orgOptionButton:active,
.ads-Appbar-orgOptionButton:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-orgOptionButton:focus {
  @apply outline-none;
}

.ads-Appbar-profileButton {
  @apply flex
    items-center
    p-3
    rounded-t
    transition-colors;
}

.ads-Appbar-profileButton:hover,
.ads-Appbar-profileButton:active,
.ads-Appbar-profileButton:focus {
  background-color: rgba(255, 255, 255, 0.1);
}

.ads-Appbar-profileButton:focus {
  @apply outline-none;
}