@import "node_modules/open-props/open-props.min.css";
@import "node_modules/open-props/normalize.min.css";
@import "node_modules/open-props/media.min.css";
@import "node_modules/open-props/buttons.min.css";

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


.voice-control-options:has(input:disabled) {
  color: #888888;
 }

 .voice-selection-options:has(select:disabled) {
  color: #888888;
 }

 .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-unitsx {
  display: flex;
  gap: var(--size-2);
  flex-direction: row;
  align-items: center;
}

.labelled-input-units {
  & input[type="radio"] {
    margin: 0 1px 0 20px;
  }
}

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

.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%;
  }

  & > 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)
  }
}

input[type="text"] {
  border: var(--border-size-1) solid var(--indigo-4);
  border-radius: var(--radius-2);
  padding: var(--size-2);
  box-shadow: var(--shadow-1);
  font-family: var(--font-sans);
  outline: none;
  flex-grow: 1;
}

input[type="text"]:focus {
  border: var(--border-size-2) solid var(--indigo-6);
}
 
dialog {
  display: grid;
  align-content: start;
  background: var(--surface-2);
  color: var(--text-1);
  max-inline-size: min(90vw, var(--size-content-3));
  margin: auto;
  padding: 0;
  position: fixed;
  inset: 0;
  border-radius: var(--radius-3);
  box-shadow: var(--shadow-6);
  z-index: var(--layer-important);
  overflow: hidden;
  transition: opacity .5s var(--ease-3);
  
  @media (--motionOK) {
    animation: var(--animation-scale-down) forwards;
    animation-timing-function: var(--ease-squish-3);
  }

  @media (--OSdark) {
    border-block-start: var(--border-size-1) solid var(--surface-3);
  }

  @media (--md-n-below) {
    &[modal-mode="mega"] {
      margin-block-end: 0;
      border-end-end-radius: 0;
      border-end-start-radius: 0;
      
      @media (--motionOK) {
        animation: var(--animation-slide-out-down) forwards;
        animation-timing-function: var(--ease-squish-2);
      }
    }
  }

  &:not([open]) {
    pointer-events: none;
    opacity: 0;
  }

  &[modal-mode="mega"]::backdrop {
    backdrop-filter: blur(25px);
  }

  &[modal-mode="mini"]::backdrop {
    backdrop-filter: none;
  }

  &::backdrop {
    transition: backdrop-filter .5s ease;
  }

  &[loading] {
    visibility: hidden;
  }

  &[open] {
    @media (--motionOK) {
      animation: var(--animation-slide-in-up) forwards;
    }
  }

  & > form {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: start;
    max-block-size: 80vh;
    max-block-size: 80dvb;

    & > article {
      overflow-y: auto; 
      max-block-size: 100%; /* safari */
      overscroll-behavior-y: contain;
      display: grid;
      justify-items: flex-start;
      gap: var(--size-3);
      box-shadow: var(--shadow-2);
      z-index: var(--layer-1);
      padding-inline: var(--size-5);
      padding-block: var(--size-3);

      @media (--OSlight) {
        background: var(--surface-1);

        &::-webkit-scrollbar {
          background: var(--surface-1);
        }
      }

      @media (--OSdark) {
        border-block-start: var(--border-size-1) solid var(--surface-3);
      }
    }

    & > header {
      display: flex;
      gap: var(--size-3);
      justify-content: space-between;
      align-items: flex-start;
      padding-block: var(--size-3);
      padding-inline: var(--size-5);

      & > button {
        border-radius: var(--radius-round);
        padding: .75ch;
        aspect-ratio: 1;
        flex-shrink: 0;
        place-items: center;
        stroke: currentColor;
        stroke-width: 3px;
      }
    }

    & > footer {
      display: flex;
      flex-wrap: wrap;
      gap: var(--size-3);
      justify-content: space-between;
      align-items: flex-start;
      padding-inline: var(--size-5);
      padding-block: var(--size-3);

      & > menu {
        display: flex;
        flex-wrap: wrap;
        gap: var(--size-3);
        padding-inline-start: 0;

        &:only-child {
          margin-inline-start: auto;
        }

        @media (max-width: 410px) {
          & button[type="reset"] {
            display: none;
          }
        }
      }
    }

    & > :is(header, footer) {
      background-color: var(--surface-2);

      @media (--OSdark) {
        background-color: var(--surface-1);
      }
    }
  }
}