@import '../variables';
@import '../components/buttons';

.ltag__reddit--container {
  max-width: 620px;
  border: 1px solid $light-medium-gray;
  border-radius: 3px;
  box-shadow: $shadow;
  margin: 1.1em auto 1.3em;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
    sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  overflow: hidden;

  .ltag__reddit--title-container {
    border-bottom: 1px solid var(--base-60);
    display: flex;
    flex-direction: column;
    padding: 0 var(--su-3);

    header {
      display: flex;
      justify-content: space-between;

      .ltag__reddit--title {
        h1 {
          margin: var(--su-2) 0 0 var(--su-1);
          font-size: var(--fs-xl);
          padding-bottom: 0;
          display: flex;
          align-items: center;

          > a {
            color: var(--link-branded-color);
            display: inline-block;
          }

          img {
            height: 40px;
            width: 40px;
            display: inline-block;
            vertical-align: middle;
            margin: 0 var(--su-3) 0 0;
          }
        }
      }

      .ltag__reddit--post-metadata {
        font-size: var(--fs-s);
        margin-left: 40px;

        span {
          display: inline-block;
          padding: var(--su-2);
          margin-left: 6px;
          color: var(--base-60);
        }
      }
    }
  }

  .ltag__reddit--body {
    padding: 0 var(--su-3);
    max-height: calc(21vw + 165px);
    overflow: hidden;

    @media screen and (min-width: 430px) {
      max-height: calc(20vw + 153px);
    }
    @media screen and (min-width: 800px) {
      max-height: 310px;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-weight: var(--fw-medium);
    }

    p {
      margin-top: 0;
      padding: 0;
      margin-bottom: 15px;
      font-size: var(--fs-l);
      line-height: var(--lh-base);
    }
  }

  .ltag__reddit--btn--container {
    padding: 1rem;
    z-index: var(--z-elevate);
    text-align: center;
    position: relative;
    box-shadow: 0 0 60px 42px var(--theme-container-background, #fff);
  }

  .ltag__reddit--btn {
    @extend .crayons-btn;
    @extend .crayons-btn--secondary;

    > a,
    > a:hover {
      color: var(--button-secondary-color);
    }
  }
}
