dialog/index.css
@import "open-props/style";
@import "open-props/normalize";
@import "open-props/media";
@import "open-props/buttons";

@import "dialog.css";

body {
  display: grid;
  place-content: center;
  padding-inline: var(--size-5);
}

main {
  display: flex;
  flex-wrap: wrap;
  place-content: center;
  gap: var(--size-5);
}

.user {
  inline-size: var(--size-fluid-7);
  aspect-ratio: var(--ratio-square);
  border-radius: var(--radius-round);
  border: var(--border-size-1) solid var(--surface-4);
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  align-items: center;
  justify-content: center;
  position: relative;

  &button > svg {
    --_icon-size: var(--size-fluid-4);
  }

  & > button {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    border-radius: var(--radius-round);
    padding: .75ch;
    aspect-ratio: 1;
    flex-shrink: 0;
  }

  &.new:not(button) {
    animation: 
      var(--animation-slide-in-down),
      var(--animation-fade-in) forwards;
    animation-timing-function: 
      var(--ease-elastic-3),
      var(--ease-3);
  }

  & img {
    border-radius: inherit;
  }
}

.labelled-input {
  display: flex;
  gap: var(--size-3);
  flex-wrap: wrap;
  align-items: center;
}

.warning-message {
  display: grid;
  grid-template-columns: var(--size-fluid-3) 1fr;
  gap: var(--size-3);
  align-items: center;

  & > svg {
    inline-size: 100%;
    stroke: var(--text-2);
  }
}

.icon-headline {
  display: flex;
  gap: var(--size-3);
  align-items: center;

  & > svg {
    inline-size: 2em;
    stroke: var(--text-2);
  }
}

@media (--md-n-below) {
  input[type="file"] {
    inline-size: 100%;
  }
}

.github-corner {
  position: absolute;
  right: 4px;
  width: 80px;
  height: 80px;
  fill: var(--surface-4);
  color: var(--surface-1);
  
  &:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out
  }

  & > svg {
    fill: inherit;
    stroke: inherit;
    position: absolute; 
    top: 0; 
    right: 0;
  }
}

@keyframes octocat-wave{
  0%,100% {
    transform: rotate(0)
  }
  20%,60% {
    transform: rotate(-25deg)
  }
  40%,80% {
    transform: rotate(10deg)
  }
}
