.directory-listing {

  ul.listing {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    margin-bottom: 6rem;

    li {
      display: table;
      width: 100%;
      border-bottom: 1px solid $light-grey-2;

      &:first-of-type {
        border-top: 1px solid $light-grey-2;
      }

      &:hover {
        span {
          opacity: 0.7;
          cursor: pointer;
        }
      }

      a {
        display: table-row;
        text-decoration: none;
        color: $dark-grey-1;

        span {
          display: table-cell;
          padding: 1rem 1.5rem;

          &.icon {
            width: 3%;
            padding-left: 0;
            padding-right: 0;
            text-align: center;
          }
          &.name {
            width: 60%;
          }
          &.size {
            width: 10%;
            white-space: nowrap;
            color: $dark-grey-3;
          }
          &.type {
            width: 27%;
            white-space: nowrap;
            color: $dark-grey-3;
          }
        }
      }
    }

  }

}