/* Ported from AnnouncementBar.styled.ts + AnnouncementBar.tsx sx props + MUI Grid emotion output */

/* AnnouncementBar.styled.ts — StyledAnnouncementBarContainerBox */
[data-name="AnnouncementBar"].MuiBox-root {
  width: 100%;
  max-width: 100%;
  height: 33.5px;
  padding: 5px 0px;
  overflow: hidden;
  box-sizing: border-box;
}

/* AnnouncementBar.styled.ts — StyledAnnouncementBarWrapperStack */
[data-name="AnnouncementBar"] > .MuiStack-root {
  width: 100%;
  max-width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

/* MUI Grid container — production emotion css-1f11l0v */
[data-name="AnnouncementBar"] .MuiGrid-container {
  display: flex;
  flex-flow: nowrap;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* MUI Grid item parent vars — production emotion */
[data-name="AnnouncementBar"] .MuiGrid-container > .MuiGrid-root {
  --Grid-parent-columns: 12;
  --Grid-parent-columnSpacing: 0px;
  --Grid-parent-rowSpacing: 0px;
  flex-grow: 0;
  flex-shrink: 1;
  border-color: currentColor;
  flex-basis: auto;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0 4px;
  overflow: hidden;
}

/* MUI Grid width + AnnouncementBar.tsx borderRight sx — production emotion css-kvxcit */
[data-name="AnnouncementBar"] .MuiGrid-grid-xs-1 {
  width: calc(100% * 1 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 1) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

[data-name="AnnouncementBar"] .MuiGrid-grid-xs-2 {
  width: calc(100% * 2 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 2) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

[data-name="AnnouncementBar"] .MuiGrid-grid-xs-3 {
  width: calc(100% * 3 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 3) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

[data-name="AnnouncementBar"] .MuiGrid-grid-xs-4 {
  width: calc(100% * 4 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 4) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

[data-name="AnnouncementBar"] .MuiGrid-grid-xs-6 {
  width: calc(100% * 6 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 6) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

[data-name="AnnouncementBar"] .MuiGrid-grid-xs-12 {
  width: calc(100% * 12 / var(--Grid-parent-columns) - (var(--Grid-parent-columns) - 12) * (var(--Grid-parent-columnSpacing) / var(--Grid-parent-columns)));
  border-right: 1px solid;
}

/* AnnouncementBar.tsx isLast borderRight: none — production emotion css-8kk3hc */
[data-name="AnnouncementBar"] .MuiGrid-container > .MuiGrid-root:last-child {
  border-right: none;
}

/* Live skeidar.no: black link text on #ECD483 — inherit CMS text color from the bar */
[data-name="AnnouncementBar"] .MuiTypography-colorTextSecondary,
[data-name="AnnouncementBar"] .custome-link,
[data-name="AnnouncementBar"] .custome-link:hover {
  color: inherit;
}

[data-name="AnnouncementBar"] .custome-link {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  text-decoration: none;
}

[data-name="AnnouncementBar"] .custome-link .MuiTypography-root {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 599.95px) {
  [data-name="AnnouncementBar"] .custome-link .MuiTypography-root {
    font-size: 0.75rem;
    line-height: 1.2;
  }
}
