@layer sections{
  [ui-section=announcement-bar]{
    --per-page:1;
    padding-inline:var(--spacing-24);
    color:var(--announcement-text-color);
    overflow:hidden;
  }
  [ui-section=announcement-bar][data-bottom-border="1"]{
    border-block-end:1px solid var(--color-surface-variant);
  }
  [ui-section=announcement-bar] ui-carousel{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:calc(var(--spacing-32) + var(--spacing-8));
    gap:var(--spacing-12);
    padding:var(--announcement-padding-top) var(--announcement-padding-horizontal) var(--announcement-padding-bottom);
    box-sizing:border-box;
  }
  [ui-section=announcement-bar] ui-carousel > .items{
    width:var(--bar-width);
  }
  [ui-section=announcement-bar] ui-carousel > .items .item{
    display:flex;
    justify-content:center;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    text-align:var(--announcement-text-align);
    font-size:var(--announcement-font-size);
    font-weight:var(--announcement-font-weight);
  }
  [ui-section=announcement-bar] ui-carousel > .items .item > a,
  [ui-section=announcement-bar] ui-carousel > .items .item > span{
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
  }

  [ui-section=announcement-bar] .ticker,
  [ui-section=announcement-bar] .static-message{
    width:100%;
    min-height:calc(var(--spacing-32) + var(--spacing-8));
    box-sizing:border-box;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:var(--announcement-padding-top) var(--announcement-padding-horizontal) var(--announcement-padding-bottom);
    font-size:var(--announcement-font-size);
    font-weight:var(--announcement-font-weight);
    color:var(--announcement-text-color);
  }
  [ui-section=announcement-bar] .static-message{
    justify-content:var(--announcement-text-align);
    text-align:var(--announcement-text-align);
  }
  [ui-section=announcement-bar] .static-message > a,
  [ui-section=announcement-bar] .static-message > span{
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
  }

  [ui-section=announcement-bar] .ticker{
    position:relative;
    isolation:isolate;
    -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
    mask-image:linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;
    mask-size:100% 100%;
  }
  [ui-section=announcement-bar] .ticker-track{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    width:max-content;
    min-width:max-content;
    max-width:none;
    transform:translate3d(100vw,0,0);
    will-change:transform;
  }
  [ui-section=announcement-bar] .ticker.is-entering .ticker-track{
    animation:announcement-ticker-enter .8s ease-out both;
  }
  [dir="rtl"] [ui-section=announcement-bar] .ticker.is-entering .ticker-track{
    animation-name:announcement-ticker-enter-rtl;
  }
  [ui-section=announcement-bar] .ticker.is-looping .ticker-track{
    animation:announcement-ticker-loop var(--announcement-ticker-speed) linear infinite;
  }
  [ui-section=announcement-bar] .ticker-group{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    width:max-content;
    min-width:max-content;
    list-style:none;
    padding:0;
    margin:0;
  }
  [ui-section=announcement-bar] .ticker-item{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    padding-inline:calc(var(--announcement-ticker-spacing) / 2);
    text-align:var(--announcement-text-align);
    white-space:nowrap;
  }
  [ui-section=announcement-bar] .ticker-item > a,
  [ui-section=announcement-bar] .ticker-item > span{
    color:inherit;
    font-size:inherit;
    font-weight:inherit;
  }
  [dir="rtl"] [ui-section=announcement-bar] .ticker-track{
    transform:translate3d(-100vw,0,0);
  }

  @keyframes announcement-ticker-enter{
    from{transform:translate3d(100vw,0,0)}
    to{transform:translate3d(0,0,0)}
  }
  @keyframes announcement-ticker-enter-rtl{
    from{transform:translate3d(-100vw,0,0)}
    to{transform:translate3d(0,0,0)}
  }
  @keyframes announcement-ticker-loop{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(calc(-1 * var(--announcement-ticker-distance)),0,0)}
  }
  [dir="rtl"] [ui-section=announcement-bar] .ticker.is-looping .ticker-track{
    animation-name:announcement-ticker-loop-rtl;
  }
  @keyframes announcement-ticker-loop-rtl{
    from{transform:translate3d(0,0,0)}
    to{transform:translate3d(var(--announcement-ticker-distance),0,0)}
  }

  [ui-section=announcement-bar][data-reduced-motion="true"] .ticker-track{
    animation:none;
    transform:none;
  }

  @media (prefers-reduced-motion: reduce){
    [ui-section=announcement-bar] .ticker-track{
      animation:none;
      transform:none;
    }
  }

  [ui-section=announcement-bar] .arrow{
    flex:0 0 auto;
  }
  @media (max-width: 760px){
    [ui-section=announcement-bar]{
      padding-inline:var(--spacing-12);
    }
    [ui-section=announcement-bar] ui-carousel > .items{
      width:100%;
    }
    [ui-section=announcement-bar] .ticker,
    [ui-section=announcement-bar] .static-message{
      padding-inline:var(--announcement-padding-horizontal);
    }
  }
}