el-menu {
  margin: 0;
  --anchor-gap: var(--inline-space-half);
  --menu-width: 50ch;
  --menu-padding: var(--block-space-half);
  padding: var(--menu-padding);

  gap: var(--block-space-half);

  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.02),
    0 0.2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
    0 0.4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
    0 0.4em 0.8em -1.2em oklch(var(--lch-always-black) / 0.4),
    0 0.8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.8em;

  &[open] {
    display: flex;
    flex-direction: column;
  }

  & .btn {
    font-weight: 400;
    padding-inline: var(--menu-padding);
  }

  &:focus-visible {
    outline: none;
  }
}

el-options {
  margin: 0;
  --anchor-gap: var(--inline-space-half);
  --menu-width: 50ch;
  --menu-padding: var(--block-space-half);

  inline-size: var(--button-width);

  box-shadow:
    0 0 0 1px oklch(var(--lch-always-black) / 0.02),
    0 0.2em 1.6em -0.8em oklch(var(--lch-always-black) / 0.2),
    0 0.4em 2.4em -1em oklch(var(--lch-always-black) / 0.3),
    0 0.4em 0.8em -1.2em oklch(var(--lch-always-black) / 0.4),
    0 0.8em 1.2em -1.6em oklch(var(--lch-always-black) / 0.5),
    0 1.2em 1.6em -2em oklch(var(--lch-always-black) / 0.6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.8em;

  &[open] {
    display: flex;
    flex-direction: column;
  }

  & .btn {
    font-weight: 400;
    padding-inline: var(--menu-padding);
  }

  & el-option {
    padding: var(--menu-padding);
    cursor: default;
    border-radius: 0.5em;
    color: var(--color-text);
    --outline-offset: 0;
  }

  &:focus-visible {
    outline: none;
  }
}

button.input {
  text-align: start;
}

el-autocomplete {
  position: relative;
  display: block;

  el-options {
    inline-size: var(--input-width);

    [aria-selected="true"]:not(:hover) {
      outline-width: var(--outline-size);
      outline-color: var(--outline-color, var(--color-link));
      outline-offset: var(--outline-offset, calc(var(--outline-size) * 2));
      outline-style: solid;
    }
  }

  button {
    color: var(--color-text);
    position: absolute;
    margin: 0;
    padding: 0;
    --hover-size: 0;
    display: flex;
    align-items: center;
    inset-block: 0;
    inset-inline-end: 0;
    padding-inline: var(--block-space-half);

    svg {
      inline-size: var(--block-space);
      block-size: var(--block-space);
    }
  }
}

/*Dialog styling*/

el-dialog-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgb(0 0 0 / 0.5);
  transition: opacity 200ms ease-out;
  z-index: 40;
}

el-dialog-backdrop[data-closed] {
  opacity: 0;
}

el-dialog-panel {
  --duration: 150ms;
  margin-inline: auto;
  display: block;
  transition: transform var(--duration) ease-out, opacity var(--duration) ease-out;
  z-index: 50;
  max-inline-size: calc(100vw - var(--block-space-double)) !important;
}

el-dialog-panel[data-closed] {
  transform: scale(0.95);
  opacity: 0;
}

dialog {
  border: none;
  background: transparent;
  color: inherit;
  max-width: none;
  max-height: none;
  overflow: visible;
}