.dialog {
  border: none;
  max-height: calc(100% - 2rem);
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: calc(100% - 2rem);
  z-index: 1000;

  &:has([data-dialog="overflow-visible"]) {
    overflow: visible;
  }

  form {
    @media (max-width: 600px) {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
  }

  &::backdrop {
    background: hsl(255, 5%, 85%, 0.85);
  }

  @media (max-width: 600px) {
    height: 100%;
    margin: 0;
    max-height: none;
    max-width: none;
    width: 100%;
  }

  @media (min-width: 768px) {
    box-shadow: 0 2px 0 hsla(0 0% 0% / 7%);
    width: 580px;
  }
}

.icon {
  display: inline-block;
  font-size: 18px;
  line-height: var(--line-height-small);
  margin-right: 5px;
}

.close-button {
  align-items: center;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  font-size: 1.6rem;
  height: 1.5rem;
  line-height: 1;
  margin: 0 -0.2em 0 0;
  opacity: 0.7;
  padding: 0;
  width: 1.5rem;

  &:hover {
    opacity: 1;
  }

  svg {
    fill: currentColor;
    height: 1.25rem;
    width: 1.25rem;
  }
}

*:not(.header) > .title,
.header,
.content,
.actions,
.dialog-actions {
  padding: 1rem 1rem;

  @media (min-width: 768px) {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  &:not(:last-child):not(.no-border) {
    border-bottom: 1px solid hsla(0 0% 0% / 7%);
  }
}

.action-right {
  margin-left: auto;
}

.header {
  align-items: center;
  display: flex;
  gap: 1rem;

  .close-button {
    margin-left: auto;
  }
}

.title {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0;
  position: relative;
}

.content {
  line-height: 1.4;
  max-height: 80vh;
  overflow: auto;
  position: relative;

  @media (min-width: 768px) {
    padding-bottom: 2rem;
    padding-top: 2rem;
  }

  h2 {
    font-size: 1.1rem;
    margin: 0;
  }
}

.dialog-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;

  .cancel-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
  }
}

.action {
  font-weight: 600;
}

.action:not(.action-right) {
  margin-right: auto;
}

.action-center {
  margin-left: auto;
  margin-right: auto;
}

.variant-default {
  /* default class */
}

.variant-rounded {
  border-radius: 0.5rem;
  box-shadow: 0 0 2rem 0 hsla(29 20% 60% / 20%);
}

.variant-wide {
  @media (min-width: 768px) {
    max-width: 1050px;
    width: calc(100% - 2rem);
  }
}

.variant-large {
  @media (min-width: 768px) {
    width: 900px;
  }
}

.variant-medium {
  @media (min-width: 768px) {
    width: 650px;
  }
}

.variant-narrow {
  @media (min-width: 768px) {
    width: 430px;
  }
}

.variant-fit-content,
.variant-fit_content {
  @media (min-width: 768px) {
    min-width: 580px;
    width: fit-content;
  }
}

.variant-narrow_to_default {
  width: calc(100% - 2rem);

  @media (min-width: 768px) {
    max-width: 580px;
    min-width: 430px;
    width: initial;
  }
}


/*
Classes to give Dialogs's a recourse style context header with a subtitle that
shows the entity title above the Dialog title.

Example:
<div class="dialog-context-header">
  <div class="dialog-context-header-title">
    <div>
      <h1 class="dialog-context-header-subtitle">
        <%= @questionnaire.title %>
      </h1>
      <%= t("questionnaires.template_preview") %>
    </div>
    <button
      type="button"
      class="close-button"
      data-action="close"
      aria-label="Close dialog"
    >
      <svg height="16" viewBox="0 0 16 16" width="16">
        <path d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z">
        </path>
      </svg>
    </button>
  </div>
</div>
*/

.dialog-context-header {
  padding: 2rem 1rem;

  @media (min-width: 768px) {
    padding: 2rem 2rem;
  }

  &-title {
    display: flex;
    font-size: 1.6rem;
    font-weight: 700;
    gap: 1rem;
    justify-content: space-between;
    line-height: 1.2;
    position: relative;
  }

  &-subtitle {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }
}