:root {
  --extra-height: 52px;
}

announcement-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 52px;
  padding: 12px 20px;
  background: oklch(98.7% 0.008 225.1);
  border-bottom: 1px oklch(68.8% 0.182 45.4) solid;
  font-size: 12px;
  @media (min-width: 993px) {
    gap: 24px;
    padding: 16px 20px;
  }

  > info {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: fit-content;
    height: 100%;
    @media (min-width: 993px) {
      gap: 10px;
    }

    > badge {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 4px 10px;
      border-radius: 8px;
      background: oklch(68.8% 0.182 45.4);

      > strong {
        margin: 0;
        color: oklch(100% 0 0);
      }
    }

    > message {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 8px;
      width: fit-content;

      > strong {
        color: oklch(37.62% 0.081 235.79);
        @media (min-width: 993px) {
          font-size: 16px;
        }
      }
      img {
        width: 22px;
      }
    }
  }
  > a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
    padding: 4px 2px 4px 8px;
    border: 2px oklch(63.2% 0.054 225.9) solid;
    border-radius: 360px;

    &:hover {
      border: 2px oklch(68.8% 0.182 45.4) solid;
    }

    @media (min-width: 993px) {
      padding: 4px 12px;
      gap: 4px;
    }

    > strong {
      color: oklch(37.62% 0.081 235.79);
      @media (min-width: 993px) {
        font-size: 14px;
      }
    }
  }
}

.hide-in-mob {
  display: none;
  @media (min-width: 993px) {
    display: inline;
  }
}

.hide-in-desk {
  @media (min-width: 993px) {
    display: none;
  }
}