// ========================================================================
// LAYOUT => OFFCANVAS
// ========================================================================
/* stylelint-disable */
.uk-offcanvas {
  & .uk-nav-header {
    background-image: linear-gradient(to right, #d8dcdf 40%, rgba(255, 255, 255, 0) 20%);
    background-position: bottom;
    background-size: 3px 1px;
    background-repeat: repeat-x;
    padding: 8px 0;
    margin-bottom: 0.35rem;
  }

  &-bar .uk-nav-default .uk-nav-sub a {
    border-left: 1px solid hsl(207, 10%, 86%);
    padding: 0 0 0 20px;

    &:hover, &:focus {
      border-left: 4px solid;
    }
  }

  &-bar .uk-nav-default .uk-nav-sub .uk-active > a {
    color: var(--color-accent);
    border-left: 4px solid var(--color-accent);
  }

  &-bar .uk-nav-default .uk-active > a {
    color: var(--color-accent);
  }

  &-bar a {
    transition: 200ms ease-in-out;
  }

  &-bar a:hover,
  &-bar a:focus {
    color: rgba(255, 255, 255, 0.7);
  }

  &-bar .navMatch > a {
    color: var(--color-accent);
  }

  // force-display sidebar on 960+
  @include breakpoint(medium) {
    display: block;
    &-bar { transform: translateX(0); }
    &-close { display: none; }
  }
}
/* stylelint-enable */