.topbar {
  width: 100%;
  position: fixed;
  padding: space(small);
  top: 0;
  transition: top 0.3s;
  z-index: 9;

  i, .ds-icon-search, .ds-icon-close, .ds-icon-mobile-menu {
    font-size: $ds-icon-header-size;
  }

  a, a:active, a:visited {
    color: $ds-header-footer-font-color;
  }

  .ds-icon-mobile-menu {
    float: right;
    span {
      float: left;
      margin-top: 0.3rem;
      font-size: 1rem;
    }
  }

  .close-menu {
    margin-top: 5px;
  }

  .menu-list {
    height: 100%;
    width: 80%;
    padding-top: 0;
    padding-right: 0;
    padding-left: 0;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    background-color: $ds-site-background;
    overflow-x: hidden;
    transition: 0.5s;

    .menu-title {
      padding-top: 1rem;
      padding-right: 0;
      border-bottom: 1px solid gray-scale(gray-light);

      label {
        margin-right: 0;
      }
    }

    li {
      transition: 0.3s;
      a {
        display: block;
        i {
          float: right;
        }
      }

      .parent-links {
        font-weight: $ds-font-weight-bold;
      }

      .parent-dashed {
        border-bottom: 3px solid;
      }
    }
  }

  .children-menu li {
    padding: space(normal);
  }

  .parent-links:focus, .children-menu li:focus {
    outline: primary-color() auto 5px;
  }
  #mobile-menu:checked + .menu-list {
    display: block;
  }

  #mobile-menu + .menu-list {
    display: none;
  }

  #search-menu:checked + #search-text,
  #search-menu:checked + #search-text + .search-submit {
    display: block;
  }

  #search-menu + #search-text,
  #search-menu + #search-text + .search-submit {
    display: none;
  }

  .logo-container {
    padding-top: 0;
    .logo {
      height: 3rem;
    }
  }

  .search-container {
    padding-top: 0;
    display: -webkit-flex;
    -webkit-flex-wrap: wrap;
    display: flex;
    flex-wrap: wrap;

    .search-field {
      position: relative;
      margin-top: space(large);
    }

    .search-submit {
      background-color: transparent;
      border: none;
      position: absolute;
      right: 1.5rem;
      top: 5.2rem;
    }

    .search-submit:focus {
      outline: none;
    }
  }

  #search-text {
    display: none;
    width: 100%;
    height: 2.5rem;
  }

  a:hover {
    opacity: .9;
    color: primary-color();
  }
}

.below-header {
  margin-top: $ds-below-header-normal;
}

.back-menu {
  bottom: 0;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateZ(0);
  transition: opacity .2s linear;
  visibility: hidden;
  z-index: 0;
}
.active-back-menu {
  z-index: 9;
  opacity: .7;
  visibility: visible;
}

@media #{$ds-computer-media-query} {
  .topbar {
    z-index: 10;
    padding: space(normal);

    #mobile-menu + .menu-list {
      display: block;
    }

    .menu-list {
      position: static;
      box-shadow: none;
      padding-left: 0.5rem;
      li.field-parent:hover i:before, li.field-parent i:before {
        content: $ds-icon-arrow-down;
        font-size: 1.2rem;
      }

      li {
        &.field-parent {
          padding-right: 0;
        }

        .parent-dashed {
          border-bottom: 0;
        }

        a i {
          float: none;
          vertical-align: sub;
        }
      }

      li.field-parent:hover {
        & > ul {
          display: block;
        }
      }

      ul.children-menu {
        position: absolute;
        display: none;
        background: $ds-site-background;
        padding-top: space(normal);
        border-radius: 6px;

        li {
          padding: space(large);
        }

        li a:hover {
          text-decoration: underline;
          font-weight: $ds-font-weight-bold;
        }
      }
    }

    .menu ul {
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      display: flex;
      flex-wrap: wrap;

      li {
        flex: auto;
        -webkit-flex: auto;
        -ms-flex: auto;
      }
    }

    .search-container {
      padding-top: space(small);
      position: relative;

      .search-field {
        margin-top: 0;
      }

      #search-menu + #search-text {
        display: block;
      }

      #search-menu + #search-text + .search-submit {
        display: block;
        top: .9rem;
        right: 1rem;
        position: absolute;
      }
    }
  }
  .below-header {
    margin-top: $ds-below-header-desktop;
  }
}
