@import "../../common/variables";
@import "../../common/helper";

path-item {
  display: table-row;
  &:hover {
    background-color: @highlight-background-color;
    svg, img {
      opacity: 1;
    }
  }
  svg, img {
    vertical-align: middle;
    width: 1.5em;
    height: 1.5em;
    fill: @primary-color;
    opacity: .5;
  }
  .icon, .content, .more {
    display: table-cell;
    border-bottom: 1px solid @border-color;
  }
  div.pathname {
    max-width: 100%;
    .limit-length();
    &:hover {
      .summary {
        color: @primary-color;
      }
    }
  }
  a.name {
    text-decoration: none;
    &:hover {
      text-decoration: underline;
    }
    &:link {
      color: @link-color;
    }
    &:visited {
      color: @link-visited-color;
    }
  }
  .summary {
    color: @minor-color;
    margin-left: .5em;
  }

  .content {
    vertical-align: bottom;
    max-width: 0;
    padding: .1em;
    .limit-length();
  }

  .icon {
    padding: .4em .5em;
    width: 1em;
    border-left: 1px solid @border-color;
  }

  .more {
    padding: .4em .5em;
    width: 1em;
    text-align: right;
    border-right: 1px solid @border-color;
    .limit-length();
    svg:hover {
      fill: @highlight-color;
    }
  }

  .item-more {
    cursor: pointer;
  }

}

#paths {
  border-top: none;
  display: table;
  width: 100%;
  &.detail {
  }
  &.card {
  }
  &.tile {
  }
}

@media only screen and (min-width: 768px) {
}

@media only screen and (max-width: 768px) {
}

@media only screen and (max-width: 480px) {
}