$topbar-bg: $light !default;
$topbar-height: 56px !default;

$topbar-navigation-font-size: 16px !default;
$topbar-navigation-font-weight: 500 !default;

$topbar-menu-item-height: 40px !default;
$topbar-menu-width: 10rem !default;

// Borders
$topbar-border-top-height: 4px;
$topbar-border-top-bg: linear-gradient(-90deg, #0093A2 0%, $brand-green 100%) !default;
$topbar-border-bottom-height: 1px !default;
$topbar-border-bottom-bg: $light-gray-2 !default;

.topbar {
  display: flex;
  align-items: center;
  position: relative;
  outline: 0;
  width: 100vw;
  height: $topbar-height;
  background: $topbar-bg;
  z-index: 10;

  // Border config for more flexibility like gradient borders;
  border-top: $topbar-border-top-height solid transparent;
  border-bottom: $topbar-border-bottom-height solid transparent;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: -$topbar-border-top-height;
    right: 0;
    height: $topbar-border-top-height;
    background: $topbar-border-top-bg;
  }
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -$topbar-border-bottom-height;
    right: 0;
    height: $topbar-border-bottom-height;
    background: $topbar-border-bottom-bg;
  }

  suka-topbar-menu, suka-topbar-navigation {
    height: 100%;
    display: block;
  }

  @media (max-width: breakpoint('sm')) {
    suka-topbar-navigation {
      display: none;
    }
  }

  .topbar__name {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 $spacing-md;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.1px;
    line-height: 20px;
    user-select: none;
    outline: none;

    .topbar__name--suffix {
      margin-left: $spacing-xs;
    }
  }

  .topbar__logo {
    height: 28px;
    width: auto;
  }

  .topbar__nav {
    height: 100%;
    padding-left: $spacing-md;
    position: relative;
    display: block;
  }

  .topbar__menu-bar[role='menubar'] {
    display: flex;
    height: 100%;
    list-style: none;
    margin: 0;
  }

  a.topbar__menu-item[role='menuitem'] {
    display: flex;
    align-items: center;
    // color: $shell-header-text-02;
    padding: 0 $spacing-sm;
    outline: none;
    height: 100%;
    font-size: $topbar-navigation-font-size;
    font-weight: $topbar-navigation-font-weight;
    letter-spacing: 0;
    line-height: 18px;
    text-decoration: none;
    user-select: none;
    transition: all .2s ease;

    .suka-icon.topbar__menu-item__icon {
      margin-right: $spacing-md;
    }

    &:hover {
      background: $light-gray-2;
    }

    &:active {
      background: $light-gray-1;
      position: relative;
    }
  }

  .topbar__sub-menu {
    position: relative;

    .topbar__menu-arrow {
      margin-left: $spacing-xs;
      top: 1px;
      position: relative;
      transition: transform .2s ease;
    }
  }

  .topbar__menu-title[role='menuitem'][aria-haspopup='true'] {
    position: relative;
  }

  .topbar__menu[role='menu'] {
    // display: none;
    list-style: none;
    margin: 0;
    opacity: 0;
    z-index: -1;
    display: flex;
    flex-direction: column;
    bottom: 0;
    left: 0;
    position: absolute;
    transition: transform .2s ease, opacity .1s ease;
    min-width: $topbar-menu-width;
    box-shadow: $box-shadow-sm;
    border-radius: $border-radius;
    background: $light;
    overflow: hidden;
    padding: $spacing-sm 0;
  }

  .topbar__menu-title[role='menuitem'][aria-expanded='true'] {
    .topbar__menu-arrow {
      transform: rotate(180deg);
    }

    + .topbar__menu {
      opacity: 1;
      transform: translateY(100%);
      // z-index: 900;
    }
  }

  .topbar__menu .topbar__menu-item[role='menuitem'] {
    height: $topbar-menu-item-height;
    padding: 0 $spacing-md;

    &:active:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 3px;
      background: $primary;
    }
  }

  .topbar__global {
    display: flex;
    justify-content: flex-end;
    flex: 1 1 0%;
    height: 100%;
    padding-right: $spacing-md;

    .topbar__sub-menu {
      list-style: none;
    }

    .topbar__menu {
      right: 0;
      left: initial;
    }
  }

  .container {
    display: flex;
    align-items: center;
    height: 100%;

    .topbar__name {
      padding-left: 0;
    }

    .topbar__global {
      padding-right: 0;
    }
  }
}