/*
 * This file is imported into every component!
 *
 * Nothing in this file may output any CSS
 * without being explicitly called by outside code.
 */
/**
 * @prop --banner-icon-fill-color: Color of the banner icon.
 * @prop --banner-icon-background-color: Background color of the banner icon.
 */
.lime-banner {
  min-height: 3.25rem;
  display: none;
  background-color: rgba(var(--contrast-100), 0.7);
  backdrop-filter: blur(0.3125rem);
  box-shadow: var(--shadow-depth-16);
}
.lime-banner.lime-banner--open {
  display: block;
}
.lime-banner.lime-banner--open .lime-banner__surface {
  opacity: 1;
}
.lime-banner .lime-banner__surface {
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  opacity: 0;
}
.lime-banner .lime-banner__content {
  display: flex;
  align-items: center;
  align-content: stretch;
  padding: 1rem;
  flex-wrap: wrap;
}
.lime-banner .icon-message {
  display: flex;
  align-items: center;
}
.lime-banner div[class^=mdc-typography] {
  color: rgb(var(--contrast-1200));
}
.lime-banner .lime-banner__icon {
  margin: 0 0.625rem;
  align-self: flex-start;
}
.lime-banner .lime-banner__actions {
  margin-left: 3.125rem;
  display: flex;
  justify-content: flex-end;
}
.lime-banner limel-icon {
  color: var(--banner-icon-fill-color, rgb(var(--contrast-100)));
  background-color: var(--banner-icon-background-color, rgb(var(--contrast-800)));
}

@media screen and (max-width: 760px) {
  .lime-banner__content {
    flex-direction: column;
    gap: 0.5rem;
  }
  .icon-message {
    display: flex;
    align-items: center;
  }
  .lime-banner__actions {
    margin-left: 0;
  }
}