@import "../../node_modules/font-awesome/scss/font-awesome";

.yp-optimize-images__list {
  background: white;
  border: 1px solid #c1c1c1;
  border-bottom-width: 0;
  list-style: none;
  max-height: 500px;
  overflow-y: auto;
  padding: 0;

  &, * {
    box-sizing: border-box;
  }

  li {
    margin: 0;
  }

  .yp-optimize-images__no-files, .yp-optimize-images__loading, .yp-optimize-images__failure {
    border-bottom: 1px solid #c1c1c1;
    display: none;
    text-align: center;
    padding: 15px;
  }

  .yp-optimize-images__list-item {
    border-bottom: 1px solid #c1c1c1;
    display: table;
    line-height: 34px;
    padding: 0 15px;
    width: 100%;

    .yp-optimize-images__list-item-id, .yp-optimize-images__list-item-filename, .yp-optimize-images__list-item-status {
      display: table-cell;
    }

    .yp-optimize-images__list-item-id {
      width: 100px;
    }

    .yp-optimize-images__list-item-status {
      text-align: center;
      width: 34px;

      .fa-clock-o {
        color: #31708f;
      }
      .fa-cogs {
        color: #8a6d3b;
      }
      .fa-check {
        color: #3c763d;
      }
      .fa-exclamation-triangle {
        color: #a94442;
      }
    }
  }
}