/*
 * Original Design Specifications
 * Target: > 1800px
 * Test Resolution: 1920 x 1080
 */
:root {
  --news-ticker-display: flex;
  --news-ticker-height: 4.8rem;
  --news-ticker-news-item-gap: 2rem;
  --news-ticker-news-item-font-size: 1.7rem;
  --news-ticker-news-item-font-weight: 400;
  --news-ticker-news-item-padding-right: 3.5rem;
  --news-ticker-first-lightbox-after-news-ticker-margin-top: 0;
  --news-item-dot-dimensions: 1.5rem;
  --news-item-icon-width: 0.8rem;
  --news-item-icon-height: 1.2rem;
  --layout-full-screen-container-with-news-ticker-height: calc(
    100dvh - var(--layout-lightbox-margin) - var(--layout-gap-basis) -
      var(--news-ticker-height)
  );
  --layout-full-screen-container-with-news-ticker-height-with-admin-bar: calc(
    100dvh - var(--layout-lightbox-margin) - var(--layout-gap-basis) -
      var(--news-ticker-height) - var(--wp-admin--admin-bar--height)
  );
}

/*
 * 2XL Media Query (1536px)
 * Target: 1799px > 1536px
 * Test Resolution: 1536 x 864
 */
@media screen and (max-width: 1799px) {
  :root {
    --news-ticker-height: 4rem;
    --news-ticker-news-item-gap: 1.5rem;
    --news-ticker-news-item-font-size: 1.5rem;
    --news-ticker-news-item-padding-right: 2.5rem;
    --news-item-dot-dimensions: 1.2rem;
    --news-item-icon-width: 0.7rem;
  }
}

/*
 * XL Media Query (1280px)
 * Target: 1535px > 1280px
 * Test Resolution: 1280 x 720
 */
@media screen and (max-width: 1535px) {
  :root {
    --news-item-icon-width: 0.7rem;
    --news-item-icon-height: 1rem;
    --news-ticker-height: 3.5rem;
    --news-ticker-news-item-font-size: 1.3rem;
    --news-ticker-news-item-padding-right: 2rem;
    --news-item-dot-dimensions: 1rem;
  }
}

/*
 * S Media Query (640px)
 * Target: < 767px
 * Test Resolution: 390 x 844
 */
@media screen and (max-width: 767px) {
  :root {
    --news-ticker-display: none;
    --news-ticker-height: 0rem;
    --news-ticker-first-lightbox-after-news-ticker-margin-top: var(
      --layout-lightbox-margin
    );
    --layout-full-screen-container-with-news-ticker-height: calc(
      100vh - var(--layout-lightbox-margin) - var(--layout-gap-basis) -
        var(--news-ticker-height)
    );
    --layout-full-screen-container-with-news-ticker-height-with-admin-bar: calc(
      100vh - var(--layout-lightbox-margin) - var(--layout-gap-basis) -
        var(--news-ticker-height) - var(--wp-admin--admin-bar--height)
    );
  }
}

.news-ticker {
  height: var(--news-ticker-height);
  padding: var(--layout-lightbox-margin);
  display: var(--news-ticker-display);
  justify-content: center;
  align-items: stretch;
}

.news-ticker + .site-main .light-box:first-of-type {
  margin-top: var(--news-ticker-first-lightbox-after-news-ticker-margin-top);
}

.news-ticker
  + .site-main
  .light-box:first-of-type
  .full-screen-container:first-of-type {
  height: var(--layout-full-screen-container-with-news-ticker-height);
}

body.admin-bar
  .news-ticker
  + .site-main
  .light-box:first-of-type
  .full-screen-container:first-of-type {
  height: var(
    --layout-full-screen-container-with-news-ticker-height-with-admin-bar
  );
}

.news-item-dot {
  display: block;
  width: var(--news-item-dot-dimensions);
  height: var(--news-item-dot-dimensions);
  background-color: var(--theme-color-accent);
  border-radius: 50%;
}

.news-item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--news-ticker-news-item-gap);
  font-size: var(--news-ticker-news-item-font-size);
  color: var(--theme-color-secondary);
  font-weight: var(--news-ticker-news-item-font-weight);
  padding: 0 var(--news-ticker-news-item-padding-right) 0 0;
  max-width: calc(100% - var(--layout-lightbox-margin) * 2);
}

.news-item-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-item-icon {
  width: var(--news-item-icon-width);
  height: var(--news-item-icon-height);
}

.news-item-icon > svg > path {
  fill: var(--theme-color-accent);
}