html, body {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  color: @primary-color;
  min-width: 320px;
  max-width: 1024px;
  margin: 0 auto;
  //background: @primary-color;
}

main {
  //padding: .5em 0;
}

nav {
  table {
    border-spacing: 0;
  }
  .btn {
    display: inline-block;
    cursor: pointer;
    color: @minor-color;
    background: @background-color;
    outline: 1px solid @border-color;
    border: none;
    padding: .5em 1em;
    &.disabled {
      cursor: not-allowed;
    }
  }
  svg-icon {
    svg {
      fill: @minor-color;
      &:hover {
        fill: @highlight-color;
      }
    }
    &[type=backspace] {
      svg:hover {
        fill: @danger-color;
      }
    }
  }
  &#nav-filters {
    background-color: @minor-background-color;
    border: 1px solid @border-color;
  }
  &#nav-actions {
    border-top: 1px solid @border-color;
  }
}

.title {
  max-width: 15em;
  .limit-length();
}

.bread-crumbs {
  box-sizing: border-box;
  padding: .5em 1em;
  max-width: 35em;
  .limit-length();
}

search-bar {
  width: 100%;
}

@media only screen and (min-width: 768px) {
  .bread-crumbs {
    display: table-cell;
  }

  .search-bar {
    width: 12em;
  }
}

@media only screen and (max-width: 768px) {
  .bread-crumbs {
    display: none;
  }

  .search-bar {
    width: 100%;
  }
}