@use "src/assets/styles/mixins";
@use "src/assets/styles/variables";

.feed {
  .item {
    @include mixins.margin-bottom(1.25);

    &:last-child {
      @include mixins.margin-bottom(0.5);
    }

    .title {
      font-size: variables.$typography-base-font-size * 1.6875;
      @include mixins.line-height(1.5);
      @include mixins.margin-top(0);
      @include mixins.margin-bottom(0.5);

      .link {
        color: hsl(var(--color-foreground));

        &:hover,
        &:focus {
          border-bottom: 1px solid hsl(var(--color-foreground));
          color: hsl(var(--color-foreground));
        }
      }
    }

    .description {
      color: hsl(var(--color-muted-foreground));
      font-size: variables.$typography-base-font-size;
      @include mixins.line-height(1);
      @include mixins.margin-bottom(0.75);
    }

    .meta {
      .time {
        color: hsl(var(--color-foreground));
        font-size: variables.$typography-small-font-size;
        font-weight: 600;
        text-transform: uppercase;
      }

      .divider {
        @include mixins.margin(0, 0.5);
      }

      .category {
        .link {
          font-weight: 600;
          text-transform: uppercase;
          color: hsl(var(--color-primary));
          font-size: variables.$typography-small-font-size;
        }
      }
    }

    .more {
      color: hsl(var(--color-foreground));
      font-size: variables.$typography-base-font-size;

      &:hover,
      &:focus {
        border-bottom: 1px solid hsl(var(--color-primary));
        color: hsl(var(--color-primary));
      }
    }
  }
}
