muddle/modules/amezing/sass/components/_article-list.scss

@use "../citrine/abstracts/functions" as *;
@use "../citrine/abstracts/variables" as *;
@use "../citrine/abstracts/mixins" as *;

.article-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc(var(--content-width) / 2.5), 1fr)
  );
  gap: 1rem;
  margin-block-start: 2rem;

  &.categories article {
    position: relative;

    &:hover .icon:last-child {
      transform: translateY(-50%) rotate(-10deg) scale(1.5);
    }

    .icon:last-child {
      position: absolute;
      transform: translateY(-50%);
      z-index: -1;
      transition: transform var(--transition-bezier);
      inset-block-start: 50%;
      inset-inline-end: -3rem;
      color: var(--bg-muted-1);
      font-size: 12rem;
    }
  }

  article {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--edge-highlight), var(--shadow);
    border-radius: 1.25rem;
    background-color: var(--bg-muted-1);
    padding: 0;
    overflow: hidden;

    &.draft {
      opacity: var(--disabled-opacity);
      filter: grayscale(1);
      transition-duration: var(--transition);
      transition-property: opacity, filter;

      &:hover {
        opacity: 1;
        filter: none;
      }
    }

    &.has-banner.has-accent-color {
      background-image: var(--bg-overlay), var(--blurnail);
      background-position: center;
      background-size: cover;
    }

    &.has-accent-color {
      @include variables-accent(("light", "common"));

      @media (prefers-color-scheme: dark) {
        & {
          @include variables-accent("dark");
        }
      }
    }

    & > div {
      display: flex;
      flex: 1;
      flex-direction: column;
      margin: 1rem;

      & > a {
        text-decoration: none;
      }
    }

    h3 {
      margin: 0;
      border-inline-start: 0.25rem solid;
      border-start-start-radius: 0.25rem;
      border-end-start-radius: 0.25rem;
      padding-inline-start: 0.5rem;
      color: var(--accent-color);
      font-weight: var(--font-weight-semi-bold);
      text-decoration: none;

      &:hover::after {
        opacity: 1;
      }

      &::after {
        opacity: 0;
        transition: opacity var(--transition);
        content: " →";
      }
    }

    .description p {
      margin-block-end: 0.75rem;
    }

    .open-post {
      @include easing-mask(bottom);
      display: flex;
      position: relative;
      justify-content: center;
      align-items: center;
      margin-block-end: -2rem;
      box-shadow: var(--edge-highlight);
      border-radius: 0;
      aspect-ratio: 2 / 1;
      overflow: hidden;
      text-decoration: none;

      &:hover {
        &::before {
          background-color: var(--shade-color);
        }

        img {
          transform: var(--hover);
          filter: blur(0.25rem);
        }

        .icon {
          transform: none;
          opacity: 1;
        }
      }

      &:active img {
        transform: none;
      }

      &::before {
        position: absolute;
        z-index: 1;
        transition: background-color var(--transition);
        inset: 0;
        border-radius: inherit;
        content: "";
      }

      img {
        position: absolute;
        transition-duration: var(--transition);
        transition-property: transform, filter;
        margin: 0;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .icon {
        transform: scale(1.5);
        opacity: 0;
        z-index: 1;
        transition:
          transform var(--transition-bezier),
          opacity var(--transition);
        color: white;
        font-size: 1.25rem;
      }
    }

    .article-details {
      flex: 1;
      justify-content: flex-end;
      margin-block-end: 0;

      .tags {
        margin-block-start: auto;
        margin-block-end: -0.25rem;
      }
    }
  }
}

.paginator {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  margin-block-start: 4rem;

  &:has(a.paginator-item.previous:active) .paginator-counter {
    border-start-start-radius: 1rem;
    border-end-start-radius: 1rem;
  }

  &:has(a.paginator-item.next:active) .paginator-counter {
    border-start-end-radius: 1rem;
    border-end-end-radius: 1rem;
  }

  &-item {
    display: inline-block;
    transition:
      border-radius var(--transition),
      border-start-end-radius var(--transition),
      border-end-end-radius var(--transition),
      border-start-start-radius var(--transition),
      border-end-start-radius var(--transition),
      background-color var(--transition),
      transform var(--transition-bezier);
    box-shadow: var(--edge-highlight);
    border-radius: 1rem;
    background-color: var(--bg-muted-1);
    padding: 0.5rem;
    color: var(--accent-color);
    line-height: 0;
    text-decoration: none;

    &:not([aria-disabled="true"]):hover {
      background-color: var(--bg-muted-2);
    }

    &:not([aria-disabled="true"]):active {
      transform: var(--active);
      border-radius: 1rem;
    }

    &-previous {
      border-start-end-radius: var(--rounded-corner-small);
      border-end-end-radius: var(--rounded-corner-small);
    }

    &-next {
      border-start-start-radius: var(--rounded-corner-small);
      border-end-start-radius: var(--rounded-corner-small);
    }
  }

  &-counter {
    @include gradient-fill;
    display: inline-block;
    transition: var(--transition-bezier);
    transition-property:
      border-start-start-radius, border-end-start-radius,
      border-start-end-radius, border-end-end-radius;
    border-radius: var(--rounded-corner-small);
    background-color: var(--bg-muted-1);
    padding: 0.25rem 0.5rem;
    font-weight: var(--font-weight-semi-bold);
    font-variant-numeric: tabular-nums;
  }
}