:root {
  --overlay-border-color: var(--color-grey-225-10-85);
  --overlay-background-color: var(--color-white);
  --overlay-font-color: var(--color-grey-225-10-15);
  --overlay-title-color: var(--color-grey-225-10-15);
  --overlay-link-color: var(--color-blue-205-100-50);
  --overlay-max-height: auto;
  --overlay-max-width: auto;
  --overlay-min-height: auto;
  --overlay-min-width: auto;
}

:local(.Overlay) {

  display: flex;
  flex: auto;
  flex-direction: column;

  width: 300px;

  padding: 0;
  z-index: 1001;

  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .16), 0 2px 16px 0 rgba(0, 0, 0, .16);

  background-color: var(--overlay-background-color);
  color: var(--overlay-font-color);

  max-height: var(--overlay-max-height);
  max-width: var(--overlay-max-width);
  min-height: var(--overlay-min-height);
  min-width: var(--overlay-min-width);
  overflow-y: auto;

  h1, h2, h3, h4 {
    font-weight: 500;
    font-size: inherit;
  }

  a[href] {
    color: var(--overlay-link-color);
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline-style: auto;
    outline-color: var(--focus-outline-color);
  }

  .overlay__header,
  .overlay__body,
  .overlay__footer {
    padding: 12px;
  }

  .overlay__body:not(:first-child) {
    padding-top: 0;
  }

  .overlay__header {
    font-size: inherit;
  }

  .overlay__title {
    margin: 0;

    font-size: inherit;
    font-weight: 500;
    color: var(--overlay-title-color);
  }
  
  .overlay__body {
    font-size: inherit;
  }

  .overlay__footer {
    border-top: 1px solid var(--overlay-border-color);
  }
  
  fieldset {
    border: none;
    margin: 0 -12px 5px 0;
    padding: 0 12px 0 0;
    max-height: calc(100vh - 176px);
    overflow-y: auto;
  }
  
  .fields {
    display: grid;
    grid-gap: 12px;
  }

  button[type="submit"] {
    width: 100%;
  }

  ol, ul {
    padding-inline-start: 16px;
  }

  ol {
    li {
      margin-bottom: 2px;
    }

    li > h4 {
      margin: 0 0 6px 0;
    }
  }

  ul.dashed {
    list-style: none;
    max-height: calc(100vh - 250px);

    li {
      margin-bottom: 4px;
      position: relative;
    }

    li > h4 {
      margin: 0 0 6px 0;
    }

    & > li:before {
      content: "–";
      position: absolute;
      margin-left: -1em; 
      font-weight: 500;
    }
  }
}
