@import "popups/small.css";
@import "popups/video.css";

.dialog-popup {
  /* === Manually set variables === */
  --popup-border-size: 1px;
  --popup-border-radius: 10px;
  /* Border of the popup will be included in this spacing */
  --popup-spacing-to-screen-edge: 10px;
  --popup-width: 400px;
  --popup-min-height: 100px;
  --popup-inner-padding: 20px;
  --popup-cross-size: 14px;

  /* === Automatically calculated variables (may be overridden) === */
  --popup-max-width: calc(100vw - var(--popup-spacing-to-screen-edge) * 2);
  --popup-min-width: calc(var(--body-min-width) - var(--popup-spacing-to-screen-edge) * 2);
  --popup-max-height: calc(100vh - var(--popup-spacing-to-screen-edge) * 2);
  --popup-cross-padding: calc(var(--popup-cross-size) * 0.25);
  --popup-cross-absolute-positioning: calc(
    (var(--popup-inner-padding) - (var(--popup-cross-size) + var(--popup-cross-padding) * 2)) / 2 + var(--popup-border-radius) * 0.2
  );

  box-sizing: border-box;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;

  border: solid var(--popup-border-size) #a8a9ad;
  border-radius: var(--popup-border-radius);

  /* Unsetting default browser values */
  min-width: unset;
  min-height: unset;
  max-width: unset;
  max-height: unset;
}
.dialog-popup::backdrop {
  background: rgba(255, 255, 255, 0.8);
}

.dialog-popup .popup-inner {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  width: var(--popup-width);
  max-width: calc(var(--popup-max-width) - var(--popup-inner-padding) * 2);
  min-width: calc(var(--popup-min-width) - var(--popup-inner-padding) * 2);

  max-height: calc(var(--popup-max-height) - var(--popup-inner-padding) * 2);
  min-height: calc(var(--popup-min-height) - var(--popup-inner-padding) * 2);

  padding: var(--popup-inner-padding);
}

.dialog-popup button.popup-cross {
  border: none;
  background: none;
  position: absolute;
  cursor: pointer;

  padding: var(--popup-cross-padding);
  top: var(--popup-cross-absolute-positioning);
  right: var(--popup-cross-absolute-positioning);
}
.dialog-popup button.popup-cross svg {
  display: block;
  color: #a8a9ad;

  width: var(--popup-cross-size);
  height: var(--popup-cross-size);
}
.dialog-popup button.popup-cross:hover svg {
  color: #c3c3c6;
}

.dialog-popup .popup-header {
  font-size: 16px;
}

.dialog-popup .popup-message {
  line-height: 1.3;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dialog-popup .popup-message ul {
  padding-left: 0;
  list-style-position: inside;
}

.dialog-popup .flex-checkbox {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 5px;
}

.dialog-popup .flex-checkbox label {
  width: fit-content;
  margin: 0;
}

.dialog-popup .popup-buttons {
  width: fit-content;
  margin: 0 auto;
  display: flex;
  gap: 10px;
}

.popup-button {
  box-sizing: border-box;
  min-width: 42px;
  height: 24px;
  line-height: 24px;
  background-color: #000;
  color: #FFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}