@import "variables";
@import "mixins";

/* ==========================================================================
   Topbars
   ========================================================================== */

.topbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  font-family: $font-primary;
  font-size: 16px;
  line-height: 24px;
  padding: 12px 24px;
  position: relative;
  z-index: 1001;

  @media (min-width: $screen-md-min) {
    flex-wrap: nowrap;
  }

  &:not(.topbar-light) {
    background-color: $primary;
    color: $white;
  }

  &.topbar-light {
    background-color: $white;
    color: $primary;
  }
}

/* Topbar: Logo
/* ========================================================================== */

.topbar-logo {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

.topbar-logo-link {
  color: inherit;
  display: flex;

  &:hover, &:focus {
    color: inherit;
  }
}

.topbar-logo-text {
  display: block;
  font-size: 14px;
  line-height: 18px;
  margin: 0 -12px;
  padding: 9px 12px;

  * + & {
    margin-left: 0;
  }
}

.topbar-logo-icon {
  color: $accent;
  display: block;
  line-height: 36px;

  :root & {
    font-size: 36px;
  }
}

.topbar-logo-image {
  display: block;
}

/* Topbar: List
/* ========================================================================== */

.topbar-toggle {
  background-color: transparent;
  border: 0;
  position: relative;
  z-index: 1001;

  @media (min-width: $screen-md-min) {
    display: none;
  }

  &:hover {
    color: rgba($white, .6);

    .topbar-light & {
      color: rgba($primary, .6);
    }

    &::after {
      content: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{rgba($white, .6)}' d='M8 .8c0 .16-.04.32-.14.44-.88 1.34-2.3 3.48-3.2 4.8-.14.22-.38.36-.66.36s-.52-.14-.66-.36c-.9-1.32-2.32-3.46-3.2-4.8A.682.682 0 0 1 0 .8C0 .36.36 0 .8 0h6.4c.44 0 .8.36.8.8z'/%3E%3C/svg%3E");

      .topbar-light & {
        content: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{rgba($primary, .6)}' d='M8 .8c0 .16-.04.32-.14.44-.88 1.34-2.3 3.48-3.2 4.8-.14.22-.38.36-.66.36s-.52-.14-.66-.36c-.9-1.32-2.32-3.46-3.2-4.8A.682.682 0 0 1 0 .8C0 .36.36 0 .8 0h6.4c.44 0 .8.36.8.8z'/%3E%3C/svg%3E");
      }
    }
  }

  &::after {
    content: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{rgba($white, .999)}' d='M8 .8c0 .16-.04.32-.14.44-.88 1.34-2.3 3.48-3.2 4.8-.14.22-.38.36-.66.36s-.52-.14-.66-.36c-.9-1.32-2.32-3.46-3.2-4.8A.682.682 0 0 1 0 .8C0 .36.36 0 .8 0h6.4c.44 0 .8.36.8.8z'/%3E%3C/svg%3E");
    display: inline-block;
    height: 7px;
    line-height: 0;
    margin-left: 6px;
    transition: transform .3s ease-in-out;
    width: 8px;

    .topbar-light & {
      content: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 8 7' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='#{rgba($primary, .999)}' d='M8 .8c0 .16-.04.32-.14.44-.88 1.34-2.3 3.48-3.2 4.8-.14.22-.38.36-.66.36s-.52-.14-.66-.36c-.9-1.32-2.32-3.46-3.2-4.8A.682.682 0 0 1 0 .8C0 .36.36 0 .8 0h6.4c.44 0 .8.36.8.8z'/%3E%3C/svg%3E");
    }
  }

  &.toggler-header-expanded::after {
    transform: scaleY(-1) translate3d(0, calc(50% - 2.5px), 0);
  }
}

.topbar-menu {
  margin-left: auto;
}

.topbar-list {
  background-color: $primary;
  color: $white;
  left: 0;
  list-style-type: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 60px;

  .topbar-light & {
    background-color: $white;
    color: $primary;
  }

  @media (min-width: $screen-md-min) {
    background-color: transparent;
    color: inherit;
    left: auto;
    max-height: none;
    overflow: visible;
    position: static;
    right: auto;
    top: auto;
    z-index: auto;
  }

  @media (min-width: $screen-md-min) {
    align-items: center;
    display: flex;
  }

  &.topbar-list-expanded {
    max-height: 100vh;
    padding: 12px 0;

    @media (min-width: $screen-md-min) {
      max-height: none;
      padding: 0;
    }
  }
}

.topbar-link {
  color: inherit;
  display: block;
  font-size: 18px;
  line-height: 24px;
  padding: 9px 24px;

  @media (min-width: $screen-md-min) {
    font-size: 14px;
    line-height: 18px;
    padding: 9px 12px;
  }

  &:hover, &:focus {
    color: inherit;
  }

  &.btn-transparent {
    margin-left: 24px;
    padding: 0;

    @media (min-width: $screen-md-min) {
      margin-left: 6px;
    }

    & > object {
      vertical-align: top;
    }
  }

  & > span {
    background-image: linear-gradient(currentColor 25%, transparent 50%);
    background-position: calc(200% - 2px) 100%;
    background-repeat: no-repeat;
    background-size: 200% 2px;
    margin-bottom: -3px;
    padding-bottom: 3px;
    transition: background-position .25s;
  }

  &:hover, :focus {
    & > span {
      background-position: 100% 100%;
    }
  }

  & .avatar-initials {
    border-radius: 50%;
    display: inline-block;
  }
}

/* Topbar: Button
/* ========================================================================== */

.topbar .btn {
  margin: 0 12px;
}

/* ==========================================================================
   Topbar Canvas
   ========================================================================== */

.topbar-canvas::after {
  background-color: rgba($primary, .8);
  bottom: 0;
  content: "";
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity .6s;
  z-index: -1;

  @media (min-width: $screen-md-min) {
    display: none;
  }
}

.topbar-canvas-expanded::after {
  opacity: 1;
  z-index: 1000;
}