:root {
  --modal-container-backdrop-filter: blur(0.5rem) saturate(90%);

  --modal-backdrop-filter: blur(24px) saturate(90%);
  --modal-min-width: 18rem;
  --modal-padding-top: 1.5rem;
  --modal-padding-bottom: 1.5rem;
  --modal-padding-left: 2rem;
  --modal-padding-right: 2rem;
  --modal-border-width: 0.0625rem;
  --modal-bar-width: 13rem;
  --modal-bar-height: 0.5rem;

  --modal-title-font-size: 2.25rem;
  --modal-title-margin-top: 1rem;
  --modal-title-margin-right: 0;
  --modal-title-margin-left: 0;
  --modal-title-margin-bottom: 1.25rem;

  --modal-button-bar-margin-top: 0.5rem;
}

.cosmo-modal__container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--modal-backdrop);
  height: 100vh;
  width: 100vw;
  backdrop-filter: var(--modal-container-backdrop-filter);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.cosmo-modal {
  --modal-accent-color: var(--primary-color);
  --modal-accent-color-light: var(--primary-color-light);
  --modal-accent-color-lighter: var(--primary-color-lighter);

  border: var(--modal-border-width) solid var(--modal-accent-color);
  padding: var(--modal-padding-top) var(--modal-padding-right) var(--modal-padding-bottom) var(--modal-padding-left);
  min-width: var(--modal-min-width);
  box-sizing: border-box;
  border-radius: var(--border-radius);
  backdrop-filter: var(--modal-backdrop-filter);
  background: var(--modal-background);
}

.cosmo-modal::before {
  content: '';
  position: absolute;
  width: var(--modal-bar-width);
  height: var(--modal-bar-height);
  background: var(--modal-accent-color);
  border-radius: var(--border-radius);
}

.cosmo-modal__title {
  padding: 0;
  margin: var(--modal-title-margin-top) var(--modal-title-margin-right) var(--modal-title-margin-bottom)
    var(--modal-title-margin-left);
  text-transform: uppercase;
  font-size: var(--modal-title-font-size);
  line-height: var(--modal-title-font-size);
  height: var(--modal-title-font-size);
  vertical-align: text-top;
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family-modal-title);
}

.cosmo-modal__content {
  font-weight: var(--font-weight-normal);
  font-family: var(--font-family);
  padding: 0;
  margin: 0;
}

.cosmo-modal__button-bar {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-top: var(--modal-button-bar-margin-top);
  gap: var(--button-container-gap);
}

.cosmo-modal__button-bar > .cosmo-button {
  border-left-width: var(--button-border-width);
}

.cosmo-modal__button-bar .cosmo-button:last-of-type {
  --button-color: var(--white);
  --button-background: var(--modal-accent-color);
  --button-border-color: var(--modal-accent-color);
}

.cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):hover,
.cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):focus {
  --button-border-color: var(--modal-accent-color-light);
  --button-background: var(--modal-accent-color-light);
}

.cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):active {
  --button-border-color: var(--modal-accent-color-lighter);
  --button-background: var(--modal-accent-color-lighter);
}

@media screen and (prefers-color-scheme: dark) {
  .cosmo-modal__button-bar .cosmo-button:last-of-type {
    --button-color: var(--black);
  }

  .cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):hover,
  .cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):focus {
    --button-border-color: var(--primary-color-dark);
    --button-background: var(--primary-color-dark);
  }

  .cosmo-modal__button-bar .cosmo-button:last-of-type:not(:disabled):active {
    --button-border-color: var(--primary-color-darker);
    --button-background: var(--primary-color-darker);
  }
}

.cosmo-modal.is--information {
  --modal-accent-color: var(--information-color);
  --modal-accent-color-light: var(--information-color-light);
  --modal-accent-color-lighter: var(--information-color-lighter);
}

.cosmo-modal.is--positive {
  --modal-accent-color: var(--positive-color);
  --modal-accent-color-light: var(--positive-color-light);
  --modal-accent-color-lighter: var(--positive-color-lighter);
}

.cosmo-modal.is--negative {
  --modal-accent-color: var(--negative-color);
  --modal-accent-color-light: var(--negative-color-light);
  --modal-accent-color-lighter: var(--negative-color-lighter);
}

.cosmo-modal.is--warning {
  --modal-accent-color: var(--warning-color);
  --modal-accent-color-light: var(--warning-color-light);
  --modal-accent-color-lighter: var(--warning-color-lighter);
}