.container {
  position: absolute;
  top: calc(100% + var(--Space-x2));
  background: var(--Surface-Primary-Default);
  border-radius: var(--Corner-radius-lg);
  box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
  padding: var(--Space-x15);
  max-width: min(100vw, calc(360px - var(--Space-x2)));
  width: 360px;

  display: flex;
  flex-direction: column;
  padding: var(--Space-x15);
  align-items: flex-start;
  gap: var(--Space-x05);
  z-index: var(--dialog-z-index);
}

.title {
  display: flex;
  align-items: center;
  gap: var(--Space-x1);
}

.message {
  text-wrap: auto;
}

@media screen and (min-width: 1367px) {
  .container {
    top: calc(100% + var(--Space-x1) + var(--Space-x2));
    left: calc(var(--Space-x1) * -1);
    padding: var(--Space-x2);
    max-width: 360px;
  }
}
