@import '../variables';
@import '../config/import';

.articles-list {
  // Hack preventing content exceeding its container - it works for scenarios where we have
  // `pre` tag having wide (overflowing) text. And the container itself is part of a layout
  // built using CSS `grid`. Without this, the grid layout wouldn't stick to its defined
  // widths...
  min-width: 0;
}

#main-status-form {
  line-height: 0;
  margin-bottom: var(--su-1);
  #main-status-form-controls {
    line-height: 24px;
  }
  .ltag__link__content {
    line-height: 1.2em;
    h2 {
      line-height: 1.08em;
    }
  }
}

.feed-dropdown {
  font-size: var(--fs-base);
  padding: var(--su-4);
  hr {
    border: 0.5px solid var(--divider);
    margin: 8px;
  }
  a {
    display: block !important;
    &:hover {
      color: var(--accent-brand);
    }  
  }
}

#article_title {
  height: auto;
  resize: none;
  transition: height 0.15s ease-out;
  min-height: 40px;
}

.crayons-story {
  background: var(--card-bg);
  box-shadow: 0 0 0 1px var(--card-secondary-border);
  margin: 0 0 var(--su-2);
  position: relative;
  border-radius: var(--radius-auto);

  &:focus-within {
    outline: none;
    --card-border: var(--accent-brand);
    box-shadow: 0 0 0 2px var(--card-border);
  }

  --story-padding: var(--su-4) var(--su-4) var(--su-3);
  --title-font-size: var(--fs-xl);

  @media (min-width: $breakpoint-s) {
    --story-padding: var(--su-4);
    --title-font-size: var(--fs-2xl);

    &--featured {
      --title-font-size: var(--fs-3xl);
    }
  }

  @media (min-width: $breakpoint-m) {
    --story-padding: var(--su-5);
  }

  &__hidden-navigation-link {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    // Prevent long title content skewing layout
    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
  }

  // Defining additional colors.
  &__secondary {
    color: var(--card-color-secondary);

    &[href]:hover,
    [enabled]:hover {
      color: var(--card-color);
    }
  }

  &__tertiary {
    color: var(--card-color-tertiary);

    &[href]:hover {
      color: var(--card-color);
    }
  }

  // Cover section for promoted (first) card.
  &__cover {
    display: block;
    width: 100%;
    height: auto;

    @media (min-width: $breakpoint-s) {
      border-radius: var(--radius) var(--radius) 0 0;
    }
  }

  &__billboard {
    &:focus-within {
      --card-border: rgba(var(--grey-900), 0.1);
      box-shadow: 0 0 0 1px var(--card-border);
    }
  }

  &__body {
    padding: var(--story-padding);
  }

  &__body-status {
    padding-top: var(--su-3);
    padding-bottom: var(--su-3);
  }

  &__indention {
    @media (min-width: $breakpoint-m) {
      padding-left: calc(var(--su-7) + var(--su-2));
    }
  }

  &__indention-billboard {
    @media (min-width: $breakpoint-m) {
      padding-left: calc(var(--su-7) + var(--su-2));
      padding-right: calc(var(--su-7) + var(--su-2));
    }
    .text-styles {
      font-size: var(--fs-base);
    }
  }

  &__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--su-3);

    @media (min-width: $breakpoint-m) {
      margin-bottom: var(--su-2);
    }

    .pinned svg {
      fill: var(--accent-brand);
    }
  }

  &__overflow {
    color: var(--card-color-tertiary);
    @media (min-width: $breakpoint-s) {
      display: none;
    }
    &:hover {
      color: var(--card-color);
    }
  }

  &:hover {
    .crayons-story__overflow {
      display: inline-flex;
    }
  }

  &__meta {
    display: flex;
    align-items: center;
    line-height: var(--lh-tight);
    font-size: var(--fs-s);
  }

  &__author-pic {
    position: relative;
    margin-right: var(--su-2);
  }

  &__tags {
    margin-bottom: var(--su-2);
    margin-left: calc(var(--su-1) * -1);
    font-size: var(--fs-s);
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    color: var(--base-80);
  }

  &__title {
    color: var(--card-color);
    line-height: var(--lh-tight);
    font-size: var(--title-font-size);

    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
    margin-bottom: var(--su-1);

    @media (min-width: $breakpoint-m) {
      margin-bottom: var(--su-1);
    }

    a {
      color: inherit;
      display: block;

      &:hover {
        color: var(--link-color-hover);
      }
    }
  }

  &__title-status {
    font-weight: var(--fw-normal);
    font-size: var(--fs-l);
    a {
      &:hover {
        color: var(--card-color);
      }
    }
    .crayons-story__innertitle-boost {
      font-size: calc(var(--fs-xs) + 1px);
      color: var(--color-secondary);
      font-weight: var(--fw-medium);
      a {
        display: inline-block;
      }
    }
    // Add spacing between paragraphs in quickie titles
    .quickie-paragraph {
      margin-bottom: var(--su-2);
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    // Style for "read more" indicator in truncated quickies
    .quickie-read-more {
      color: var(--color-secondary);
      font-style: italic;
      font-size: 0.9em;
      margin-left: var(--su-1);
    }
  }

  &__flare-tag {
    font-weight: normal;
    // font-size: 0.6em;
    padding: 0.3em;
    vertical-align: middle;
    position: relative;
    top: -2px;
    line-height: 1em;
    display: inline-block;
    border-radius: var(--radius);
    background: var(--base-60);
    margin-right: var(--su-1);
    color: var(--base-inverted);
  }

  &__contentpreview {
    padding: var(--su-4) 0;
    .ltag__link {
      margin: 0;
    }
    .ltag__link .ltag__link__content h2 {
      font-size: calc(1.15em + 0.09vw)
    }
    .ltag__link .ltag__link__content .ltag__link__tag {
      font-size: 0.75em;
    }
    br {
      display: none;
    }
    .c-embed {
      padding: 9px 16px !important;
      margin: 0 !important;
      font-size: 14px !important;
    }
    // Hide all crayons-cards after the first two
    .c-embed:nth-child(n+3) {
      display: none;
    }
  }

  &__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--fs-s);
    line-height: var(--lh-tight);
    margin-left: -2px;
  }

  &__details {
    display: flex;
    margin-left: calc(var(--su-2) * -1);
  }

  &__comments {
    cursor: default;
    border-radius: var(--radius);
    position: relative;
    bottom: var(--su-2);
    margin: var(--su-2);
    margin-bottom: 0;
    margin-top: -3px;
    padding: var(--su-2) 0;

    @media (min-width: $breakpoint-s) {
      bottom: var(--su-3);
      margin: var(--su-3);
      margin-bottom: 0;
      margin-top: -5px;
    }

    &__headline {
      font-weight: var(--fw-bold);
      font-size: var(--fs-s);
      color: var(--card-color-secondary);
      margin-bottom: var(--su-3);
      padding-left: calc(var(--su-6) + var(--su-4));
    }

    &__actions {
      padding-left: calc(var(--su-6) + var(--su-4));
      margin-top: var(--su-1);
      a {
        font-weight: var(--fw-medium);
      }
    }
  }

  &__snippet {
    color: var(--card-secondary-color);
    font-size: inherit;
    em {
      font-style: normal;
      // Intentionally not using our CSS variables for `color` and `background`
      // so this is inline with <mark>'s browser default styling.
      color: black;
      background: yellow;
    }
    // overflow-wrap: anywhere isn't supported in Safari, in which case this fallback applies
    overflow-wrap: break-word;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  &__headline {
    font-family: var(--ff-monospace);
    font-size: var(--fs-s);
    color: var(--card-color-tertiary);
    margin-bottom: var(--su-4);

    a {
      color: inherit;
      display: block;

      &:hover {
        color: var(--link-color-hover);
      }
    }
  }

  &__save {
    display: flex;
    align-items: center;
  }

  &__slug-segment {
    opacity: 0.5;
  }

  &__video {
    position: relative;
    padding-top: 56%;
    display: block;
    background-color: var(--base-100);
    background-size: cover;

    img {
      width: 100%;
    }

    &__time {
      position: absolute;
      bottom: var(--su-4);
      right: var(--su-4);
      background: rgba(0, 0, 0, 0.8);
      color: var(--base-inverted);
      border-radius: var(--radius);
      padding: var(--su-1);
      font-size: var(--fs-s);
      font-family: var(--ff-monospace);
    }
  }
}

.crayons-podcast-episode {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--su-4);

  &:last-child {
    margin-bottom: 4px;
  }

  &__cover {
    width: var(--su-8);
    height: var(--su-8);
    margin-right: var(--su-2);

    img {
      width: var(--su-8);
      min-width: var(--su-8);
      border-radius: var(--radius);
    }
  }

  &__author {
    font-size: var(--fs-s);
    color: var(--card-color-secondary);
    margin-top: -5px;
  }

  &__title {
    color: var(--card-color);
    line-height: var(--lh-tight);
    margin-bottom: var(--su-1);
    font-size: var(--fs-l);

    @media (min-width: $breakpoint-s) {
      font-size: var(--fs-xl);
    }

    a {
      color: inherit;
      display: block;

      &:hover {
        color: var(--link-color-hover);
      }
    }
  }
}

// Legacy
.crayons-story {
  .c-btn {
    .bm-initial {
      display: inline-flex;
    }
    .bm-success {
      display: none;
    }

    &.selected {
      .bm-initial {
        display: none;
      }
      .bm-success {
        display: inline-flex;
      }
    }
  }
}
