@use "core/functions" as *;
@use "core/mixins" as *;

#link-guard-dialog {
  width: MIN(600px, calc(100% - 2rem));
  max-width: 100%;
  border: none;
  padding: 0;
  color: fi-var(global-font-color);
  background-color: transparent;
  opacity: 0;
  translate: 0 12px;
  scale: 0.98;
  transition:
    display 0.2s allow-discrete,
    overlay 0.2s allow-discrete,
    translate 0.2s,
    scale 0.2s,
    opacity 0.2s;

  .guard-content {
    @include link-guard-content;
  }

  &::backdrop {
    background-color: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition:
      display 0.2s allow-discrete,
      overlay 0.2s allow-discrete,
      opacity 0.2s;
  }

  &[open] {
    opacity: 1;
    translate: 0 0;
    scale: 1;
  }

  &[open]::backdrop {
    opacity: 1;
  }

  @starting-style {
    &[open],
    &[open]::backdrop {
      opacity: 0;
    }

    &[open] {
      translate: 0 12px;
      scale: 0.98;
    }
  }
}
