// Base
ul.entity-list {
  margin-top: 1em;

  .entity-header{
    font-size: 1.2em;
    font-weight: 500;
    border-bottom: solid var(--line-width) var(--accent);
  }

  .entity-item {
    a {
      text-decoration: none;
      color: var(--black);

      .cover {
        width: 200px;
        height: 200px;
        background-color: var(--gray-2);
        margin-right: 1em;
      }

      .body {
        .title {
          font-weight: 500;
        }
        .subtitle {
          font-size: .8em;
          &:empty:before {
            content: "\200b";
          }
        }
      }
    }
  }
}

// Column mode
.entity-list.column {
  .entity-item{
    margin-bottom: 1em;
    .entity-container {
      display: flex;
      justify-content: space-between;

      a {
        display: flex;
        flex-direction: row;
        align-items: center;

        padding: 1em 1em;

        flex-grow: 2;
        .body {
          display: flex;
          flex-direction: column;
        }
      }

      .widget {
        display: flex;
        align-items: center;
        padding-right: 1em;
      }
    }
  }
}

// Grid mode
.entity-list.grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  .entity-item {
    margin-bottom: 2em;

    a {
      .cover {
        width: 250px;
        height: 250px;
      }

      .body {
        height: 15px;
        .title {
          max-width: 250px;
          display: inline-block;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .subtitle {
          display: none;
        }
      }
    }
  }
}

// Highligth Column
.entity-list.column{
  .entity-item {
    border-bottom: solid var(--line-width) var(--gray-1);
    transition: background-color 300ms ease-in;

    &:after{
      display: block;
      content: '';
      border-bottom: solid var(--line-width) var(--accent);
      transition: width 300ms ease-in;
      width: 0;
    }

    &:hover, &.selected{
      &:after{
        width: 100%;
      }
      background-color: var(--gray-1);
    }
  }
}

// Highligth Grid
.entity-list.grid{
  .entity-item {
    .body .title:after {
      display: block;
      content: '';
      border-bottom: solid var(--line-width) var(--accent);
      transition: width 300ms ease-in;
      width: 0;
    }

    .cover {
      outline: none;
      transition: all 300ms ease-in-out;
    }

    &:hover, &.selected {
      .cover {
        outline: 6px var(--accent) solid;
        outline-offset: -6px;
      }
      .body .title:after {
        width: 100%;
      }
    }
  }
}