/**
 * Reading Time Module - Public Styles
 * 
 * All values use CSS variables from sg-acf-variables.css.
 *
 * @package    SG_Advanced_Content_Features
 * @subpackage Modules\ReadingTime\Assets
 * @since      2.7.0
 * @license    GPL-2.0-or-later
 */

/* ==========================================================================
   Reading Time Container
   ========================================================================== */

.sg-acf-reading-time {
  display: inline-flex;
  align-items: center;
  gap: var(--sg-acf-space-1-5);
  line-height: var(--sg-acf-leading-relaxed);
  vertical-align: middle;
  color: inherit;
  font-size: inherit;
}

.sg-acf-reading-time__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
  opacity: var(--sg-acf-opacity-75);
}

.sg-acf-reading-time__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.sg-acf-reading-time__content {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sg-acf-space-1);
  flex-wrap: wrap;
}

.sg-acf-reading-time__before,
.sg-acf-reading-time__after {
  opacity: var(--sg-acf-opacity-80);
}

.sg-acf-reading-time__value {
  font-weight: var(--sg-acf-weight-medium);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media screen and (max-width: 480px) {
  .sg-acf-reading-time {
    gap: var(--sg-acf-space-1);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .sg-acf-reading-time {
    color: var(--sg-acf-black);
  }
}