@import '../settings/fonts';
@import '../settings/colors';
@import '../settings/top-bar';
@import '../settings/list-item';
@import '../settings/z-index';
@import '../tools/functions/core';
@import '../tools/mixins/flex';
@import '../tools/mixins/focus';
@import '../tools/mixins/spacing-responsive';
@import '../tools/mixins/vendor-prefixes';
@import 'node_modules/@collabui/icons/scss/mixins';

@include exports('cui-top-bar') {
  .#{$top-bar-class} {
    width: 100%;
    color: $top-bar__font-color--dark;
    background-color: $top-bar__background-color--dark;
    fill: $top-bar__font-color--dark;

    &--fixed {
      position: fixed;
      top: 0;
      z-index: $zindex-top-bar-fixed;
    }

    &__container {
      @include flex($jc: space-between);

      @media #{$large-only} {
        height: $top-bar__height--desktop;
        padding-right: rem-calc(20);
        padding-left: rem-calc(20);
      }
    }

    &__nav {
      display: none;

      .#{$list-item__class} {
        padding: rem-calc(2) rem-calc(12);
      }

      @media #{$large-up} {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 2 0 auto;
      }
    }

    &__nav,
    .#{$top-bar-mobile-class} {
      .#{$list-item__class} {
        color: $top-bar__font-color--dark;
        background-color: $top-bar-list-item__background;

        &.active,
        &:hover {
          &:not(:disabled) {
            color: $top-bar__font-color--dark--active;
            background-color: $top-bar-list-item__background;
          }
        }

        &:focus {
          @include focus-styles;
        }
      }
    }

    &__right {
      display: none;

      @media #{$large-up} {
        display: flex;
        flex: 0 1 auto;
        align-items: center;
        justify-content: flex-end;

        .#{$top-bar-class}__user {
          display: flex;
          align-items: center;
        }

        .#{$prefix}-avatar {
          margin-left: $brand-anchor__padding--large;
        }

        .user-image {
          width: 100%;
          height: 100%;
        }

        button,
        a {
          &:focus {
            @include focus-styles;
          }
        }

        a {
          padding: $brand-anchor__padding--large;
          color: $top-bar__font-color--dark;
        }

        button {
          margin-left: $brand-anchor__padding--large;
        }
      }
    }

    .cui-avatar {
      width: $top-bar-avatar__size;
      height: $top-bar-avatar__size;
      padding: 0;
      overflow: hidden;
      border-radius: 50%;

      &:focus {
        @include focus-styles;
      }

      .user-image {
        width: $top-bar-avatar__size;
        height: $top-bar-avatar__size;
        padding: 0;
        cursor: pointer;
      }
    }

    &__mobile-menu-button {
      margin-right: rem-calc(32);
      flex: 0 1 auto;
      align-self: center;

      @media #{$large-up} {
        display: none;
      }
    }

    &__brand {
      margin: rem-calc(6) rem-calc(16);
      flex: 1 0 auto;

      .#{$prefix}-brand {
        padding: $brand-anchor__padding;
        color: inherit;
        align-items: center;
        text-decoration: none;
        display: flex;

        &:focus {
          @include focus-styles;
        }

        &__logo {
          display: flex;
          width: auto;
          height: $brand-image__size;
          margin-right: rem-calc(12);
          font-size: $brand-image__size;

          @media #{$medium-only} {
            height: $brand-image__size--medium;
            font-size: $brand-image__size--medium;
          }

          @media #{$large-up} {
            height: $brand-image__size--large;
            font-size: $brand-image__size--large;
          }

          img {
            width: auto;
            height: $brand-image__size;

            @media #{$medium-only} {
              height: $brand-image__size--medium;
            }

            @media #{$large-up} {
              height: $brand-image__size--large;
            }
          }
        }

        &__image {
          width: auto;
          height: $brand-image__size;
          line-height: $brand-image__size--mobile;

          @media #{$medium-up} {
            height: $brand-image__size--medium;
          }
        }

        &__title {
          font-size: $brand__font-size;
          line-height: $brand-image__size;

          @media #{$medium-up} {
            font-size: $brand__font-size--medium;
            line-height: $brand-image__size--medium;
          }
        }

        @media #{$medium-up} {
          padding: $brand-anchor__padding--medium;
        }
      }

      @media #{$large-up} {
        flex: 0 1 auto;
        margin-right: 0;
        margin-left: rem-calc(-16);
      }

      @media #{$large-only} {
        margin-left: 0;
      }
    }

    .#{$top-bar-mobile-class} {
      position: fixed;
      top: 0;
      left: 0;
      z-index: $zindex-modal;
      display: flex;
      width: 100vw;
      height: 100vh;
      margin-left: 0;
      color: $top-bar__font-color--dark;
      background-color: $top-bar__background-color--dark;
      opacity: 0;
      transform: translateX(-150%);
      box-shadow: 0px 1px 2px 1px $black-20;
      animation-duration: 250ms;
      animation-name: slideLeft;
      animation-timing-function: ease-in-out;
      transition: opacity 1s ease-in-out;
      flex-direction: column;
      justify-content: flex-start;

      @media #{$medium-only} {
        width: rem-calc(384);
      }

      &.open {
        opacity: 1;
        transform: translateX(0);
        animation-duration: 250ms;
        animation-name: slideRight;
        animation-timing-function: ease-in-out;
        transition: none;
      }

      &__mask {
        position: fixed;
        top: 0;
        left: 0;
        z-index: $zindex-modal-background;
        width: 100vw;
        height: 100vh;
        background-color: $black-60;
        opacity: 0;
        visibility: hidden;
        transition: all 250ms ease-in-out;

        &.open {
          opacity: 1;
          visibility: visible;
        }
      }

      &__close {
        position: absolute;
        top: rem-calc(20);
        right: rem-calc(24);
      }

      .#{$top-bar-class}__brand {
        margin: rem-calc(4) rem-calc(60) rem-calc(4) rem-calc(16);
        flex: 0 1 auto;

        .#{$prefix}-brand {
          flex-direction: column;
          align-items: flex-start;

          &__logo {
            height: $brand-image__size;
            margin-bottom: rem-calc(18);
            font-size: $brand-image__size;

            img {
              width: auto;
              height: $brand-image__size;

              @media #{$medium-only} {
                height: $brand-image__size--medium;
              }
            }

            @media #{$medium-only} {
              height: $brand-image__size--medium;
              margin-bottom: rem-calc(18);
              font-size: $brand__font-size--medium;
            }
          }

          &__title {
            font-size: $brand__font-size--mobile;
            line-height: rem-calc(32);

            @media #{$medium-only} {
              font-size: $brand__font-size--medium;
              line-height: $brand-image__size--medium;
            }
          }
        }
      }

      .#{$list-item__class} {
        padding-left: $top-bar-list-item__padding--mobile;
      }

      .cui-list-separator {
        background-color: $gray-2;
      }
    }

    &--light {
      color: $top-bar__font-color--light;
      background-color: $top-bar__background-color--light;
      fill: $top-bar__font-color--light;

      .#{$prefix}-brand {
        &:focus {
          @include focus-styles;
        }
      }

      .#{$top-bar-class}__nav,
      .#{$top-bar-mobile-class} {
        color: $top-bar__font-color--light;
        background-color: $top-bar__background-color--light;
        fill: $top-bar__font-color--light;

        .#{$list-item__class} {
          color: $top-bar__font-color--light;
          background-color: $top-bar-list-item__background;

          &.active,
          &:hover {
            &:not(:disabled) {
              color: $top-bar__font-color--light--active;
              background-color: $top-bar-list-item__background;
            }
          }

          &:focus {
            @include focus-styles;
          }
        }

        .cui-list-separator {
          background-color: $gray-7;
        }
      }

      .#{$top-bar-class}__right {
        color: $top-bar__font-color--light;

        button,
        a {
          &:focus {
            @include focus-styles;
          }
        }

        a {
          padding: $brand-anchor__padding--large;
          color: $top-bar__font-color--light;
        }
      }
    }

    &--blue {
      background-color: $top-bar__background-color--blue;

      .#{$top-bar-class}__nav,
      .#{$top-bar-mobile-class} {
        background-color: $top-bar__background-color--blue;

        .#{$list-item__class} {
          background-color: $top-bar-list-item__background;

          &.active,
          &:hover {
            &:not(:disabled) {
              color: $top-bar__font-color--blue--active;
            }
          }
        }
      }
    }
  }

  @keyframes slideRight {
    0% {
      transform: translateX(-150%);
    }

    100% {
      transform: translateX(-2rem);
    }
  }

  @keyframes slideLeft {
    0% {
      transform: translateX(-2rem);
    }

    100% {
      transform: translateX(-150%);
    }
  }
}

/**
* @name Default Top Bar
* @description Application or site header for web applications and content sites.
*
* @category layout
* @component top-bar
* @section default
*
* @state .top-bar--dark - Dark colored background $black
*
* @html
<header class="cui-top-bar cui-top-bar--dark" role="navigation">
  <div class="cui-top-bar__container row">
    <div class="cui-top-bar__brand">
      <a class="cui-brand" href="/">
        <div class="cui-brand__logo">
          <!-- Note: use either image or icon, but not both -->
          <!-- img src="/assets/spark-logo.svg" alt="Collab UI" -->
          <i class="icon icon-cisco-logo"></i>
        </div>
        <div class="cui-brand__title">Collab UI</div>
      </a>
    </div>
    <nav class="cui-top-bar__nav ">
      <div class="cui-list cui-list--horizontal" role="list">
        <a class="cui-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Navigation</a>

      </div>
    </nav>
    <div class="cui-top-bar__right ">
      <!-- Note: conditionally show top-bar__user or top-bar__logged-out -->
       <div class="cui-top-bar__user">
       </div>
       <div class="cui-top-bar__logged-out">
          <a href="javascript:void(0)">Log In</a>
          <button class="cui-button cui-button--blue">Button</button>
       </div>
    </div>
    <i class="cui-top-bar__mobile-menu-button icon icon-list-menu_20"></i>
    <div class="cui-top-bar__mobile cui-tb-mobile">
      <i class="icon icon-cancel_20"></i>
      <div class="cui-top-bar__brand">
        <a class="cui-brand" href="/">
          <div class="cui-brand__logo">
            <img src="/assets/spark-logo.svg">
          </div>
          <div class="cui-brand__title">Collab UI</div>
        </a>
      </div>
      <div class="cui-list-separator"></div>
      <nav class="cui-tb-mobile__nav" role="navigation">
        <a class="cui-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Navigation</a>
        <div class="cui-list-separator"></div>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Sign out</a>
      </nav>
    </div>
    <div class="cui-tb-mobile__mask" role="none"></div>
  </div>
</header>
*/

/**
* @name Light Top Bar
* @description Application or site header for web applications and content sites.
*
* @category layout
* @component top-bar
* @section light
*
* @state .top-bar--light - Light colored background $white
*
* @html
<header class="cui-top-bar cui-top-bar--light" role="navigation">
  <div class="cui-top-bar__container row">
    <div class="cui-top-bar__brand">
      <a class="cui-brand" href="/">
        <div class="cui-brand__logo">
          <!-- Note: use either image or icon, but not both -->
          <!-- img src="/assets/spark-logo.svg" alt="Collab UI" -->
          <i class="icon icon-cisco-logo"></i>
        </div>
        <div class="cui-brand__title">Collab UI</div>
      </a>
    </div>
    <nav class="cui-top-bar__nav ">
      <div class="cui-list cui-list--horizontal" role="list">
        <a class="cui-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Navigation</a>

      </div>
    </nav>
    <div class="cui-top-bar__right ">
      <!-- Note: conditionally show top-bar__user or top-bar__logged-out -->
       <div class="cui-top-bar__user">
          <a href="javascript:void(0)">My Apps</a>
         <div class="cui-avatar" tabindex="0" aria-haspopup="true">
            <img class="user-image" src="https://randomuser.me/api/portraits/men/85.jpg" />
         </div>
       </div>
       <!-- div class="cui-top-bar__logged-out">
          <a href="javascript:void(0)">Log In</a>
          <button class="cui-button cui-button--blue">Button</button>
       </div -->
    </div>
    <i class="cui-top-bar__mobile-menu-button icon icon-list-menu_20"></i>
    <div class="cui-top-bar__mobile cui-tb-mobile">
      <i class="icon icon-cancel_20"></i>
        <div class="cui-top-bar__brand">
          <a class="cui-brand" href="/">
            <div class="cui-brand__logo">
              <img src="/assets/spark-logo.svg">
            </div>
            <div class="cui-brand__title">Collab UI</div>
          </a>
        </div>
      <div class="cui-list-separator"></div>
      <nav class="cui-tb-mobile__nav" role="navigation">
        <a class="cui-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Navigation</a>
        <div class="cui-list-separator"></div>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Sign out</a>
      </nav>
    </div>
    <div class="cui-tb-mobile__mask" role="none"></div>
  </div>
</header>
*/

/**
* @name Blue Top Bar
* @description Application or site header for web applications and content sites.
*
* @category layout
* @component top-bar
* @section blue
*
* @state .top-bar--blue - Primary blue colored background $blue-base
*
* @html
<header class="cui-top-bar cui-top-bar--blue" role="navigation">
  <div class="cui-top-bar__container row">
    <div class="cui-top-bar__brand">
      <a class="cui-brand" href="/">
        <div class="cui-brand__logo">
          <!-- Note: use either image or icon, but not both -->
          <!-- img src="/assets/spark-logo.svg" alt="Collab UI" -->
          <i class="icon icon-cisco-logo"></i>
        </div>
        <div class="cui-brand__title">Collab UI</div>
      </a>
    </div>
    <nav class="cui-top-bar__nav ">
      <div class="cui-list cui-list--horizontal" role="list">
        <a class="cui-list-item active" role="listItem" href="javascript:void(0)">Develop</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Styles</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Layout</a>
        <a class="cui-list-item" role="listItem" href="javascript:void(0)">Navigation</a>

      </div>
    </nav>
    <div class="cui-top-bar__right ">
      <!-- Note: conditionally show top-bar__user or top-bar__logged-out -->
       <div class="cui-top-bar__user">
         <button class="cui-avatar cui-button cui-button--circle cui-button--link">
            CU
         </button>
       </div>
    </div>
  </div>
</header>
*/