.my-popup__close {
  align-items: center;
  appearance: none;
  background: var(--my-popup-close-bg);
  border: 1px solid var(--my-popup-close-border-color);
  border-radius: 6px;
  box-shadow: var(--my-popup-close-shadow);
  color: var(--my-popup-close-color);
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  height: 2.25rem;
  justify-content: center;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 0.75rem;
  top: 0.75rem;
  width: 2.25rem;
  z-index: 1;
}

.my-popup__close:hover {
  background: var(--my-popup-close-hover-bg);
  border-color: var(--my-popup-close-hover-border-color);
  color: var(--my-popup-close-hover-color);
}

.my-popup__close:focus-visible,
.my-popup__button:focus-visible {
  box-shadow: var(--my-popup-focus-ring);
  outline: none;
}

.my-popup__icon {
  align-items: center;
  background: var(--my-popup-icon-bg);
  border: 0.1875rem solid currentColor;
  border-radius: 999px;
  box-shadow: var(--my-popup-icon-shadow);
  display: inline-flex;
  font-size: 2.25rem;
  font-weight: 800;
  height: 4.75rem;
  justify-content: center;
  justify-self: center;
  line-height: 1;
  margin: var(--my-popup-icon-margin, 0 0 0.125rem);
  overflow: hidden;
  position: relative;
  transform: translateZ(0);
  width: 4.75rem;
}

.my-popup__icon--success {
  color: var(--my-popup-success-color);
}

.my-popup__icon--error {
  color: var(--my-popup-error-color);
}

.my-popup__icon--warning {
  color: var(--my-popup-warning-color);
}

.my-popup__icon--info,
.my-popup__icon--question {
  color: var(--my-popup-info-color);
}

.my-popup__icon--question {
  color: var(--my-popup-question-color);
}

.my-popup__icon-symbol {
  background: currentColor;
  display: block;
  flex: 0 0 auto;
  height: 70%;
  -webkit-mask: var(--my-popup-icon-mask) center / contain no-repeat;
  mask: var(--my-popup-icon-mask) center / contain no-repeat;
  width: 70%;
}

.my-popup__icon-symbol--success {
  --my-popup-icon-mask: url("../assets/icons/success.svg");
}

.my-popup__icon-symbol--error {
  --my-popup-icon-mask: url("../assets/icons/error.svg");
}

.my-popup__icon-symbol--warning {
  --my-popup-icon-mask: url("../assets/icons/warning.svg");
}

.my-popup__icon-symbol--info {
  --my-popup-icon-mask: url("../assets/icons/info.svg?v=large-glyph");
}

.my-popup__icon-symbol--question {
  --my-popup-icon-mask: url("../assets/icons/question.svg");
}

.my-popup__title {
  color: var(--my-popup-color);
  font-size: var(--my-popup-title-font-size, 1.35rem);
  font-weight: var(--my-popup-title-font-weight, 700);
  line-height: 1.25;
  margin: 0;
  overflow-wrap: anywhere;
  text-align: center;
}

.my-popup__content {
  color: var(--my-popup-muted-color);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-align: center;
}

.my-popup__text {
  margin: var(--my-popup-text-margin, 0);
  max-width: var(--my-popup-text-max-width, none);
  font-size: var(--my-popup-text-font-size, inherit);
  font-weight: var(--my-popup-text-font-weight, inherit);
  line-height: var(--my-popup-text-line-height, inherit);
}

.my-popup__html > :first-child {
  margin-top: 0;
}

.my-popup__html > :last-child {
  margin-bottom: 0;
}

.my-popup__validation {
  background: var(--my-popup-validation-bg);
  border-radius: 6px;
  color: var(--my-popup-error-color);
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 0.75rem;
  text-align: left;
}

.my-popup__validation[hidden] {
  display: none;
}