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

$red: $harley-davidson-orange;
$inner-block-margin: $component-margin-left;

// === mobile ===
// inner component block
.inner-block {
  margin: 0 rem($inner-block-margin) 0 rem($inner-block-margin);
}

.disable-inner-block {
  margin: 0 rem(-$inner-block-margin) 0 rem(-$inner-block-margin);
}
// control components in the body of the article
.components {
  .component {
    margin-bottom: $component-margin-bottom;
  }
}

.hide {
  display: none;
}

.desc-text-color {
  color: $gray-50;
}

.desc-text-block {
  @extend .desc-text-color;
  font-size: rem(15px);
  line-height: 1.5;
  margin: rem(17px) rem($inner-block-margin) 0 rem($inner-block-margin);
}

.text-link {
  border-bottom: 1px solid;
  border-color: $red;
}

// === tablet ===
@include mq($min-width: $screen-sm-min, $max-width: $screen-sm-max) {
  .inner-block {
    display: block;
    margin: 0 auto;
  }

  .disable-inner-block {
    margin: 0;
  }

  .desc-text-block {
    max-width: $tablet-small-width;
    margin: rem(17px) auto 0 auto;
  }

  .components {
    .component {
      margin-left: auto;
      margin-right: auto;
      max-width: $tablet-small-width;
      &.image, &.imagediff, &.slideshow, &.embeddedcode, &.youtube {
        max-width: $tablet-medium-width;
      }
    }
  }
}

// === desktop ===
@include mq($min-width: $screen-md-min) {
  .inner-block {
    display: block;
    margin: 0 auto;
  }

  .disable-inner-block {
    margin: 0; 
  }

  .desc-text-block {
    max-width: $desktop-small-width;
    margin: rem(17px) auto 0 auto;
  }

  .components {
    .component {
      margin-left: auto;
      margin-right: auto;
      max-width: $desktop-small-width;
      &.image, &.imagediff, &.slideshow, &.embeddedcode, &.youtube {
        max-width: $desktop-medium-width;
      }
    }
  }
}

.topic-box {
    border: solid 2px $primary-color;
    color: $primary-color;
    display: inline;
    padding: 0.1rem 0.5rem;
    font-size: $font-size-medium;
    font-weight: $font-weight-bold;
    margin-right: 0.5rem;
}