// Type sizes
$bordered-spacing: 16px;
$item-font-size: 14;
$item-image-size: 80px;
$item-line-height: 20;

// XXX this is gross, and attaches the bottom-border to the item above.
// Ideally, we'd attach the top-border to the item that needs it.
// Unfortunately the border needs to go _above_ the row gap as currently
// set up, which means that some refactoring will be required to do this.
@mixin bottom-border-except-last-grid-row($columns) {
  .ds-list-item:not(.placeholder):not(:nth-last-child(-n+#{$columns})) {
    @include ds-border-bottom;
    margin-bottom: -1px;  // cancel out the pixel we used for the border
    padding-bottom: $bordered-spacing;
  }
}

@mixin set-item-sizes($font-size, $line-height, $image-size) {
  .ds-list-item {
    // XXX see if we really want absolute units, maybe hoist somewhere central?
    font-size: $font-size * 1px;
    line-height: $line-height * 1px;
    position: relative;
  }

  .ds-list-item-title {
    @include limit-visibile-lines(3, $line-height, $font-size);
  }

  .ds-list-image {
    min-width: $image-size;
    width: $image-size;
  }
}

.ds-list {
  display: grid;
  grid-row-gap: 24px;
  grid-column-gap: 24px;

  // reset some stuff from <ul>.  Should maybe be hoisted when we have better
  // regression detection?
  padding-inline-start: 0;

  &:not(.ds-list-full-width) {
    @include set-item-sizes($item-font-size, $item-line-height, $item-image-size);

    // "2/3 width layout"
    .ds-column-5 &,
    .ds-column-6 &,
    .ds-column-7 &,
    .ds-column-8 & {
      grid-template-columns: repeat(2, 1fr);
    }

    // "Full width layout"
    .ds-column-9 &,
    .ds-column-10 &,
    .ds-column-11 &,
    .ds-column-12 & {
      grid-template-columns: repeat(3, 1fr);
    }

    &.empty {
      grid-template-columns: auto;
    }

    .ds-list-item-excerpt {
      display: none;
    }
  }

  &:not(.ds-list-images) {
    .ds-list-image {
      display: none;
    }
  }

  a {
    @include dark-theme-only {
      color: $grey-10;
    }

    color: $grey-90;
  }
}

.ds-list-item-link:focus {
  @include ds-fade-in;
}

.ds-list-numbers {
  $counter-whitespace: ($item-line-height - $item-font-size) * 1px;
  $counter-size: 32px;
  $counter-padded-size: $counter-size + $counter-whitespace * 1.5;

  .ds-list-item {
    counter-increment: list;
  }

  .ds-list-item:not(.placeholder) > .ds-list-item-link {
    padding-inline-start: $counter-padded-size;

    &::before {
      @include dark-theme-only {
        background-color: $teal-70;
      }

      background-color: $pocket-teal;
      border-radius: $counter-size;
      color: $white;
      content: counter(list);
      font-size: 17px;
      height: $counter-size;
      line-height: $counter-size;
      margin-inline-start: -$counter-padded-size;
      margin-top: $counter-whitespace / 2;
      position: absolute;
      text-align: center;
      width: $counter-size;
    }

    &:hover::before {
      @include dark-theme-only {
        background-color: $blue-40;
      }

      background-color: $blue-40;
    }

    &:active::before {
      @include dark-theme-only {
        background-color: $blue-60;
      }

      background-color: $blue-70;
    }
  }
}

.ds-list-borders {
  @include ds-border-top;
  grid-row-gap: $bordered-spacing;
  padding-top: $bordered-spacing;

  &.ds-list-full-width,
  .ds-column-1 &,
  .ds-column-2 &,
  .ds-column-3 &,
  .ds-column-4 & {
    @include bottom-border-except-last-grid-row(1);
  }

  &:not(.ds-list-full-width) {
    // "2/3 width layout"
    .ds-column-5 &,
    .ds-column-6 &,
    .ds-column-7 &,
    .ds-column-8 & {
      @include bottom-border-except-last-grid-row(2);
    }

    // "Full width layout"
    .ds-column-9 &,
    .ds-column-10 &,
    .ds-column-11 &,
    .ds-column-12 & {
      @include bottom-border-except-last-grid-row(3);
    }
  }
}

.ds-list-full-width {
  @include set-item-sizes(17, 24, $item-image-size * 2);
}

.ds-list-item {
  // reset some stuff from <li>.  Should maybe be hoisted when we have better
  // regression detection?
  display: block;
  text-align: start;

  &.placeholder {
    background: transparent;
    min-height: $item-image-size;
    box-shadow: inset $inner-box-shadow;
    border-radius: 4px;

    .ds-list-item-link {
      cursor: default;
    }

    .ds-list-image {
      opacity: 0;
    }
  }

  .ds-list-item-link {
    mix-blend-mode: normal;

    display: flex;
    justify-content: space-between;
    height: 100%;
  }

  .ds-list-item-excerpt {
    @include limit-visibile-lines(2, $item-line-height, $item-font-size);
    @include dark-theme-only {
      color: $grey-10-80;
    }
    color: $grey-50;
    margin: 4px 0 8px;
  }

  p {
    font-size: $item-font-size * 1px;
    line-height: $item-line-height * 1px;
    margin: 0;
  }

  .ds-list-item-info,
  .ds-list-item-context {
    @include limit-visibile-lines(1, $item-line-height, $item-font-size);
    @include dark-theme-only {
      color: $grey-40;
    }

    color: $grey-50;
    font-size: 13px;
  }

  .ds-list-item-title {
    font-weight: 600;
    margin-bottom: 4px;
  }

  .ds-list-item-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .ds-list-image {
    height: $item-image-size;
    margin-inline-start: $item-font-size * 1px;
    min-height: $item-image-size;

    img {
      border-radius: 4px;
      box-shadow: inset 0 0 0 0.5px $black-15;
    }
  }

  &:hover {
    .ds-list-item-title {
      color: $blue-40;
    }
  }

  &:active {
    .ds-list-item-title {
      color: $blue-70;
    }
  }
}
