@media screen and (max-width: 991px) {
  .btn {
    white-space: normal;
  }

  .video-background {
    display: none;
  }
}

.new-block-form {
  button {
    box-shadow: 0 0 5px 0 black;
    transition: all .3s;
    background: white;

    &:hover, &:focus {
      scale: 1.1;
    }

    &:hover:not(:active) {
      box-shadow: 0 0 10px 0 black;
    }

    &:hover:active {
      scale: 1;
    }
  }
}

button.btn-toolbar {
  line-height: 0;
  aspect-ratio: 1;
  font-size: 3rem;
}

dialog {
  padding: 0;
  margin: 0;
  max-width: 95%;
  max-height: 95svh;
  margin: auto;
  border-radius: 1rem;
  border: none;
  overflow: auto;
  overscroll-behavior: contain;
  transition: scale .3s;
  scale: 0;
}

dialog[open] {
  animation: fadein .3s ease-in forwards;
  scale: 1;
}

@keyframes fadein{
  0%{
    opacity:0;
    scale: 0.5;
  }
  100%{
    opacity:1;
    scale: 1;
  }
}

[popover] {
  --from: -100%;
  --to: 0;
  border-radius: 1rem;
  border: none;
  max-width: 95%;
  max-height: 95svh;
  overscroll-behavior: contain;
  animation: fadeIn .3s ease-in forwards;
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16), 3px 3px 6px rgba(0, 0, 0, 0.23);
  right: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    translate: var(--from, -100%) 0;
  }
  to {
    opacity: 1;
    translate: var(--to, -100%) 0;
  }
}

dialog {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  padding: 20px;
}

#edit_block_popover {
  --from: 300px;
  --to: -20px;
  max-width: 320px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  left: auto;
  right: 0;
  padding: 0;
  overflow: visible;

  nav {
    display: flex;
    position: absolute;
    bottom: 10px;
    width: 100%;

    a {
      width: 100%;
      text-align: center;
    }
  }
}

.toolbar-content {
  display: flex;
  scroll-snap-type: x mandatory;
  width: 100%;
  overflow-x: auto;
  scroll-behavior: smooth;
  & > * {
    scroll-snap-align: start;
    min-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 10px 20px;
  }

  input[type='range'] {
    --value: 0;
    position: relative;
    margin-bottom: 20px;
    &:after {
      content: attr(data-value);
      position: absolute;
      left: calc(var(--value) * 1%);
      top: calc(100% + 0.5rem);
      translate: -50% 0;
      transition: left .1s;
    }
  }

  label {
    font-weight: normal;
    padding: 4px;
    border-radius: .5rem;
    transition: all .3s;
    scale: 1;
    outline: 1px solid transparent;
    outline-offset: -2px;

    &[for], &:has(input:is([type=radio], [type=checkbox]), [type=file]) {
      cursor: pointer;
      user-select: none;
      position: relative;

      input {
        opacity: 0;
        position: absolute;
        pointer-events: none;
        top: 0;
        left: 0;
        max-width: 100%;
      }

      &:has(input:checked) {
        /* box-shadow: 0 0 0 1px #333; */
        outline-color: #333;
        outline-offset: 1px;
      }

      &:has(input:focus) {
        scale: 1.1;
        /* box-shadow: 0 0 0 1px transparent, inset 0 0 0 2px blue; */
      }
    }

    input {
      vertical-align: middle;
      margin: 0 0 1px 0;
      border-width: 1px;
      border-radius: 0.5rem;
      background: transparent;
      padding: 4px;

      &:invalid {
        border-color: red;
        accent-color: red;
        outline-color: red;
      }
      &:invalid:focus {
        border-color: red;
      }
    }

    svg {
      vertical-align: middle;
    }

    /* &:has(input:is([type=radio])) { */
    /*   aspect-ratio: 1; */
    /*   min-width: 24px; */
    /*   text-align: center; */
    /* } */
    /**/
    /* &:has(input:is([type=radio])) input { */
    /*   opacity: 0.5; */
    /*   position: absolute; */
    /*   left: 0; */
    /*   top: 0; */
    /*   pointer-events: none; */
    /* } */
  }

  legend {
    top: 10px;
    user-select: none;
    position: relative;
    margin-bottom: 0;
  }

  & > fieldset {
    display: flex;
    flex-direction: column;
    max-height: calc(100svh - 70px);
    overflow-y: auto;
    margin-bottom: 70px;

    & > label:not(:has(input)) {
      margin-top: 3rem;
    }
  }

   p {
     margin: 0;
   }

  input[type=range] {
    height: 2px;
  }

  button.radio, label.radio {
    padding: 5px;
    margin-top: 0;
    margin-bottom: 5px;
    aspect-ratio: 1;
    min-width: 30px;
    border-radius: 50%;
    line-height: 1;
    font-weight: bold;
    overflow: hidden;
    max-width: 20px;
    text-overflow: ellipsis;
    font-size: 0;
    letter-spacing: 0;
    &:first-letter {
      font-size: 2rem;
    }
  }

  select {
    border-radius: 0.5rem;
    border: 1px solid currentColor;
    appearance: none;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>') no-repeat 95% 50%;
    background-size: 1rem;
    padding: 4px;
    text-transform: capitalize;
    margin-bottom: 5px;
  }

  button.bg-transparent {
    background: linear-gradient(135deg, transparent 47%, red 53%, transparent 53%) 50% no-repeat;
    background-size: 50%;
  }

  .gravity-selector {
    background: rgba(200, 200, 200, 0.7);
    border-radius: 0.5rem;
    overflow: hidden;
  }

  &:has(input[name*=background_video_url]:invalid) {
    label[for=block_background_video_url] {
      color: red;
    }
  }

  .container {
    max-width: 100%;
  }

  label:has(input[type=file]:disabled) {
    position: relative;
    color: transparent;
    cursor: not-allowed;
    &:after {
      color: black;
      position: absolute;
      left: 30px;
      content: 'Uploading...';
    }
  }
}