@import '~bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import '../../themes/variables.scss';
@import '../../themes/common-variables.scss';
@import '../../themes/media-queries.scss';
@import '../../themes/font-mixins.scss';
@import '../../themes/animation.scss';

.popup {
  position: fixed;
  background-color: $white;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-height: 0%;
  opacity: 0;
  @include fade-in-down(0.5s);
}

.topic-wrapper {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding-bottom: 3rem;
}

.current {
  opacity: 0.45;
}

.open {
  max-height: 100%;
  opacity: 1;
}

.close {
  display: none;
  max-height: 0;
  opacity: 0;
}

.closeBtn {
  position: fixed;
  top: 0.7rem;
  right: 3.2rem;
  width: 1.8rem;
  height: 1.8rem;
  padding: 0.3rem;
  transition: all 0.3s ease;
  cursor: pointer;
  user-select: none;
  z-index: 1000;

  img {
    width: 100%;
  }

  &:hover {
    padding: 0.1rem;
  }

  @media (max-width: $screen-xs-max) {
    right: 1.2rem;
  }
}

.topic-title {
  color: $primary-color;
  font-size: $font-size-base;
  font-weight: $font-weight-bold;
  margin-bottom: 1.5rem;
  @media (max-width: $screen-xs-max) {
    font-size: $font-size-large;
    margin-bottom: 0;
  }
}

.list-outer {
  @media (max-width: $screen-md-min) {
    margin-top: rem(50px);
  }
}

.article-title {
  font-size: $font-size-large;
  font-weight: $font-weight-bold;
}

.article-desc {
  display: inline;
  color: $gray-50;
  font-size: $font-size-xsmall;
  @media (max-width: $screen-xs-max) {
    display: none;
  }
}

.continue {
  display: inline;
  color: $primary-color;
  font-weight: $font-weight-bold;
  font-size: $font-size-xsmall;
  margin: 0 0.1rem;

  @media (max-width: $screen-xs-max) {
    display: none;
  }

  &:link {
    color: $primary-color;
  }
  &:hover {
    border-bottom: 2px solid $primary-color;
  }
  &:visited {
    color: $primary-color;
  }
}

.topic {
  display: table;
  line-height: rem(23px);
  width: 100%;
  transition: background-color 0.2s ease-in;
  padding: 0 0.5rem 1rem 0.5rem;

  &:hover {
    background-color: $light-gray;
  }

  @media (max-width: $screen-md-min) {
    margin: 1rem 0.3rem;
  }

  @media (min-width: $screen-lg-min) {
    height: 10rem;
  }

  .img-outer {
    width: rem(90px);
    display: table-cell;
    vertical-align: top;
    padding-top: 0.7rem;

    @media (max-width: $screen-xs-min) {
      width: rem(60px);
      padding-top: rem(8px);
    }

    @media (max-width: $screen-md-min) {
      padding-top: rem(5px);
    }
  }

  .img-box {
    margin-top: rem(18px);
    width: rem(80px);
    height: rem(80px);
    overflow: hidden;
    margin: 10px;
    position: relative;
    background-color: $gray-border-color;

    @media (max-width: $screen-xs-min) {
      width: rem(48px);
      height: rem(48px);
    }

    .crop {
      position: absolute;
      left: -100%;
      right: -100%;
      top: -100%;
      bottom: -100%;
      margin: auto; 
      height: auto;
      width: auto;
      max-width: rem(150px);
      max-height: rem(150px);

      @media (max-width: $screen-xs-min) {
        width: rem(96px);
        height: rem(96px);
      }
    }
  }

  .text-box {
    display: table-cell;
    vertical-align: top;
    padding: 0 0.5rem;
  }

}