@import (reference) '../../styles/modules/variables.less';
@import (reference) '../../styles/custom.less';
@import (reference) '../../styles/fonts.less';

.StoryFull {
  margin: 12px 0;

  &__posted_from span.PostedFrom__text {
    top: 0;
  }

  &__bullet:after {
    content: '\2022';
    font-size: 14px;
    margin: 0 8px;
    color: @blue-botticelli;
  }

  &__reply {
    border-radius: 5px;
    border: @base-border;
    padding: 16px 12px;

    & > &__title {
      color: #353535;
      font-weight: 700;
      line-height: 1.3em;
    }
  }

  &__title {
    color: #353535;
    font-weight: 700;
    line-height: 1.3em;
    font-size: 28px;

    @media @small {
      font-size: 34px;
    }
  }

  &__comments_title {
    color: @primary-color;
    font-weight: 500;
    margin-top: 8px;
  }

  &__topics {
    margin: 16px -@mobile-padding 16px;

    &__content {
      display: flex;
      height: 46px;
      white-space: nowrap;
      margin-left: @mobile-padding;
      margin-right: @mobile-padding;

      & > .Topic {
        margin: auto 4px auto 0;
      }
    }
  }

  &__header {
    position: relative;
    display: flex;
    padding: 16px 0;

    &__text {
      margin-left: 16px;

      & > a {
        display: block;
        font-size: 20px;

        .ant-tag {
          font-weight: bold;
          margin-left: 8px;
        }
      }

      &__date {
        color: #99aab5;
        font-size: 14px;
      }
    }

    &__reading__time {
      color: @blue-botticelli;
      font-size: 14px;
    }

    &__more {
      position: absolute;
      right: 8px;
      top: 36px;
      line-height: 12px !important;
      font-size: 36px !important;
      color: @primary-color;

      &:hover {
        cursor: pointer;
        color: darken(@primary-color, 15%);
      }
    }
  }

  &__content img {
    cursor: pointer;
  }
}
div[data-dir='rtl'] .StoryFull {
  &__header {
    &__text {
      margin-left: 0px;
      margin-right: 16px;
    }
  }
}

@import 'StoryFull-nightmode';
