@mixin abstract-dialog() {
}

@mixin abstract-dialog-trigger() {
}

@mixin abstract-dialog-content() {
  --unitone--gutters: var(--unitone--global--gutters);

  position: fixed;
  margin: auto !important;
  background-color: transparent;
  border: none;
  max-width: calc(100% - var(--unitone--gutters));
  max-height: calc(100% - var(--unitone--gutters));
  overflow: visible;

  &[open] {
    outline: none;
  }

  &::backdrop {
    background-color: rgb(0 0 0 / 35%);
  }
}

@mixin dialog() {
  [data-unitone-layout~="dialog"] {
    @include abstract-dialog();
  }

  [data-unitone-layout~="dialog-trigger"] {
    @include abstract-dialog-trigger();
  }

  [data-unitone-layout~="dialog-content"] {
    @include abstract-dialog-content();
  }
}