:root {
  --button-highlight-color: #6a6a6c;
  --color-red: #f53326;

  --icon-position-left: 0;
  --icon-position-right: unset;
  &[data-os="ios-pre25"] {
    --icon-position-left: unset;
    --icon-position-right: 0;
  }
}

body > input[type="file"] {
  position: absolute;
  opacity: 0;
}

#gallery {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  /* --columns: 3; */
  --gap: 2px;
  --cell-size: 120px;
  --progress: 0%;
  --media-transition-duration: 0.4s;
  --header-height: calc(2.6rem + 10px);
  --upload-y: 1rem;

  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;

  > header {
    --radius: calc(var(--header-height) * 0.5);
    --gradient-distance: 15px;
    --inner-radius: calc(var(--radius) - var(--gradient-distance));
    --mask-hide-outer: radial-gradient(ellipse at center, black 0%, black 35%, rgba(0, 0, 0, 0.8) 60%, rgba(0, 0, 0, 0.4) 80%, transparent 100%);
    --mask-hide-inner: radial-gradient(ellipse at center, transparent 0%, transparent 35%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.6) 80%, black 100%);
    --max-width: min(350px, calc(100% - 10px));
    display: flex;
    flex: 0;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: var(--header-height);
    background: #000;
    /* background: var(--header-background-color); */

    backdrop-filter: blur(6px) saturate(140%) brightness(var(--header-brightness));
    z-index: 10;
    transition: background 0.3s, transform 0.3s, left 0.3s, right 0.3s, height 0.3s, border-radius 0.3s, top 0.3s, width 0.3s;

    body:not([data-page="my-event"]) & {
      --header-brightness: 80%;
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 3rem;
      border-bottom: 1px solid color-mix(in oklab, var(--header-background-color) 60%, #fff);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
    }

    > a:nth-child(1) {
      fill: #fff;
      flex: 0 100px;
      position: relative;
      padding: 0.5rem 0.5rem 0.3rem;
      transition: transform 0.3s;
      left: 5px;
      transition: left 0.3s, transform 0.3s;

      > svg {
        display: block;
        width: 100%;
        aspect-ratio: 2.18;
        height: auto;

        path.text {
          stroke: #fff;
        }
      }
    }

    #media-count {
      color: #fff;
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 16px;
      transform: translate(-50%, -50%);
    }

    > button.dots {
      background: none;
      --horizontal-padding: 1.5rem;
      position: absolute;
      right: 5px;
      width: 2.5rem;
      height: 2.5rem;
      top: 50%;
      transform: translateY(-50%);
      transition: right 0.3s;

      > span {
        display: none;
      }

      &::before {
        content: "";
        position: absolute;
        width: 50%;
        height: 50%;
        background: 50% / contain no-repeat url(/img/icons/dots.svg);
        filter: invert();
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      + menu {
        margin: 0;
        padding: 0;
        background: hsla(0, 0%, 19%, 0.7);
        position: absolute;
        backdrop-filter: blur(20px);
        box-shadow: 0 0 50px rgb(0 0 0 / 50%);
        right: 0.5rem;
        top: calc(0.5rem + var(--header-height));
        border-radius: 10px;
        width: 230px;
        transform: scale(0.6); /* translateX(calc(-1 * var(--header-width)));*/
        transform-origin: top right;
        transition: opacity 0.3s, transform cubic-bezier(0.46, 0.01, 0.15, 1.3) 0.3s;
        opacity: 0;
        pointer-events: none;

        /* @starting-style {
          transform: scale(0.6) translateX(calc(-1 * var(--header-width)));
          opacity: 0;
        } */

        > li {
          list-style: none;

          > button {
            background: none;
            border-radius: 0;
            display: block;
            width: 100%;
            text-align: left;
            color: #fff;

            > span {
              display: block;
              width: 100%;
              padding-left: 1.5rem;

              [data-os="ios-pre25"] & {
                padding-left: 0;
              }

              &::after {
                content: "";
                position: absolute;
                right: var(--icon-position-right);
                left: var(--icon-position-left);
                top: 50%;
                transform: translateY(-50%);
                width: 1rem;
                height: 1rem;
                filter: invert();
              }
            }

            &.full-screen span::after {
              background: 50% / contain no-repeat url("/img/icons/full-screen.svg");
            }

            &.share span::after {
              background: 50% / contain no-repeat url("/img/icons/share.svg");
            }

            &.about span::after {
              background: 50% / contain no-repeat url("/img/icons/info.svg");
            }

            &.tips span::after {
              background: 50% / contain no-repeat url("/img/icons/ribbon.svg");
            }
          }

          &:not(:first-child) > button {
            border-top: 1px solid var(--button-highlight-color);
          }
        }
      }

      &[data-expanded] {
        + menu {
          opacity: 1;
          pointer-events: auto;
          transform: scale(1); /* translateX(calc(-1 * var(--header-width)));*/
        }
      }
    }

    > button.upload {
      position: fixed;
      top: calc(100dvh - 100% - var(--upload-y));
      left: 50%;
      transform: translateX(-50%);
      background: rgba(0, 0, 0, 0.5);
      width: 3rem;
      height: 3rem;

      > span {
        pointer-events: none;
        position: absolute;
        left: 50%;
        top: -100%;
        transform: translate(-50%, -4px);
        color: #fff;
        font-size: 0.8rem;
        width: 160px;
        text-align: center;
        white-space: break-spaces;
        background: rgb(0 0 0 / 0.6);
        padding: 0.4rem;
        border-radius: 0.5rem;
        border: 2px solid;
        opacity: 0;
        transition: opacity 0.3s;

        /* down arrow/triangle */
        &::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: -11px;
          transform: translateX(-50%);
          width: 0;
          height: 0;
          border-left: 9px solid transparent;
          border-right: 9px solid transparent;
          border-top: 9px solid #fff;
        }
      }

      body[data-show-tooltips] & {
        > span {
          opacity: 1;
        }
      }

      &::before {
        content: "";
        border-radius: 50%;
        background: linear-gradient(45deg, #bf1000, #ffe500), linear-gradient(102deg, #9000bb, #00aafa00);
        position: absolute;
        width: 2.5rem;
        height: 2.5rem;
        z-index: -1;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border: 3px solid #fff;
      }

      &::after {
        content: "";
        width: 120%;
        height: 120%;
        background: 50% / contain no-repeat url(/img/icons/add.svg);
        filter: invert();
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }
    }

    .upload-progress {
      pointer-events: none;
      position: absolute;
      width: 100%;
      height: 100%;
      background: #000;
      left: 0;
      top: 0;
      opacity: 0;
      transition: opacity 0.3s;
      font-size: 16px;
      overflow: hidden;

      span {
        color: #fff;
        position: absolute;
        left: 50%;
        width: 100%;
        top: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
      }

      .progress-bar {
        position: absolute;
        background: #3b3b3b;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 7px;

        > div {
          width: var(--progress);
          /* background-color: #2a84fe; */
          background: 0% / 100vw fixed linear-gradient(to right, #005cff, lime);
          height: 100%;
        }
      }
    }
  }

  body[data-scrolled] & {
    --header-height: 2.6rem;

    > header {
      background: var(--header-background-color);
      border-radius: var(--radius);
      width: var(--max-width);
      top: 5px;

      &::before,
      &::after {
        opacity: 1;
      }

      > a:nth-child(1) {
        left: 0;
        transform: translateY(-5px);
      }

      > button.dots {
        right: 0;
      }

      .upload-progress {
        border-radius: var(--radius);
      }
    }
  }

  &.uploading {
    header {
      .upload-progress {
        opacity: 1;
      }
    }
  }

  > div.media-items {
    top: 0;
    flex: 1;
    gap: var(--gap);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(var(--cell-size) - var(--gap)), 1fr));
    grid-auto-rows: calc(0.75 * var(--cell-size));
    background: #161616;
    padding-top: 1px;

    > article {
      position: relative;
      border-radius: 3px;
      overflow: hidden;

      > div {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background: #000;

        > img {
          display: block;
          width: 100%;
          height: 100%;
          object-fit: cover;
          opacity: 0;
          transition: opacity 0.35s;
          position: absolute;
          pointer-events: none;
        }

        &.loaded {
          > img {
            opacity: 1;
            position: relative;
          }
        }

        /* &.loading {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 100%;
                    position: relative;
                } */

        &.loading::after {
          content: "";
          width: 20px;
          height: 20px;
          border: 3px solid rgb(73 73 73);
          border-left: 3px solid rgb(52 152 219 / 0);
          border-radius: 50%;
          animation: spin 1s linear infinite;
          left: calc(50% - 10px);
          top: calc(50% - 10px);
          transform: translate(-50%, -50%);
          position: absolute;
        }
      }

      &.removed {
        > div {
          > img {
            opacity: 0;
          }
        }
      }

      &[data-type="video"] {
        > div::after {
          content: "";
          background: 50% / 0.5rem no-repeat url(/img/icons/play.svg) #fff;
          filter: invert();
          width: 1.2rem;
          height: 1.2rem;
          border-radius: 50%;
          position: absolute;
          right: 0.2rem;
          bottom: 0.2rem;
          border: 2px solid #000;
        }
      }
    }
  }

  > section#slideshow {
    --padding-top: calc(var(--header-height) + var(--gap));
    width: 100%;
    height: 0;
    /* margin-top: var(--padding-top); */
    overflow: hidden;
    position: relative;
    transition: height 0.3s ease-in-out;

    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: 50%;
      background-repeat: no-repeat;
      transition: opacity 0.4s;
      opacity: 0;
      z-index: 1;
    }

    &[data-current="1"] {
      &::before {
        opacity: 1;
        z-index: 1;
      }

      &::after {
        opacity: 0;
        z-index: 2;
      }

      &.transitioning::after {
        opacity: 1;
      }
    }

    &[data-current="2"] {
      &::before {
        opacity: 0;
        z-index: 2;
      }

      &::after {
        opacity: 1;
        z-index: 1;
      }

      &.transitioning::before {
        opacity: 1;
      }
    }

    &::before {
      background-image: var(--slide-bg-1);
    }

    &::after {
      background-image: var(--slide-bg-2);
    }
  }

  &[data-slideshow] {
    > section#slideshow {
      /* height: calc(100dvh - var(--media-height)); */
      height: 100%;
      aspect-ratio: 0.87;
    }
  }

  > div.zoomed {
    background: #000;
    position: fixed;
    display: flex;
    flex-direction: column;
    gap: 0;
    opacity: 1;
    transition: opacity var(--media-transition-duration);
    z-index: 20;
    transform: translateX(calc(-1 * var(--header-width)));

    &.hidden {
      opacity: 0;
      pointer-events: none;

      > article {
        > img {
          transform: translate(-50%, -50%) scale(0.9);
        }
      }
    }

    &[data-disabled] {
      pointer-events: none;
      z-index: -1;
    }

    > header {
      flex: 0 2rem;
      position: absolute;
      opacity: 0;
      transition: opacity 0.23s;
      font-size: 0.9rem;
      background: rgb(0 0 0 / 0.4);
      width: auto;
      top: 0.5rem;
      line-height: 1rem;
      padding: 0.3rem 0.5rem;
      border-radius: 1rem;
      color: #fff;
      z-index: 20;
      white-space: nowrap;
      text-align: center;
      backdrop-filter: blur(5px);
    }

    > article {
      flex: 1;
      position: relative;
      overflow: hidden;
      max-height: 100dvh;
      max-width: 100dvw;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      > img,
      > video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: transform var(--media-transition-duration);
        z-index: 2;
      }

      > video {
        opacity: 0;
        width: 100%;
        height: auto;
        z-index: 1;
      }

      > img:not([src]) {
        display: none !important;
      }

      > .progress-bar {
        position: absolute;
        left: 0;
        right: 0;
        height: 4px;
        background: rgba(255, 255, 255, 0.2);
        opacity: 0;
        transition: opacity 0.23s;
        z-index: 20;
        display: none;

        > .progress {
          height: 100%;
          background: 0% / 100vw fixed linear-gradient(to right, #005cff, lime);
          width: 0;
        }
      }
    }

    > footer {
      position: absolute;
      bottom: 1rem;
      width: 100dvw;
      height: 3rem;
      opacity: 0;
      transition: opacity 0.23s;

      > button {
        background: rgb(0 0 0 / 0.4);
        border: 2px solid #fff;
        width: 2rem;
        height: 2rem;
        position: absolute;
        backdrop-filter: blur(5px);

        &.download {
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);

          > span {
            display: none;
          }

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: 50% / contain no-repeat url(/img/icons/download.svg);
            filter: invert();
            width: 1.2rem;
            height: 1.2rem;
          }
        }

        &.zoom-out {
          right: 1rem;
          top: 50%;
          transform: translate(0, -50%);

          > span {
            display: none;
          }

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%) rotate(45deg);
            background: 50% / contain no-repeat url(/img/icons/add.svg);
            filter: invert();
            width: 2rem;
            height: 2rem;
          }
        }

        &.remove {
          left: 1rem;
          top: 50%;
          transform: translate(0, -50%);
          opacity: 0;
          transition: opacity 0.23s;
          border-color: var(--color-red);

          > span {
            display: none;
          }

          &::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: 50% / contain no-repeat url(/img/icons/trash.svg);
            filter: invert() brightness(0.3) sepia() hue-rotate(340deg) saturate(7);
            width: 1.2rem;
            height: 1.2rem;
          }
        }
      }
    }

    &[data-owner] button.remove {
      opacity: 1;
    }

    &[data-loading] {
      > article {
        > .progress-bar {
          opacity: 1;
        }
      }
    }

    &[data-swiping] {
      > article {
        > .progress-bar {
          display: none;
        }
      }
    }
  }

  &.zooming {
    > div.zoomed {
      transition: width var(--media-transition-duration), height var(--media-transition-duration), left var(--media-transition-duration), top var(--media-transition-duration);

      > article {
        img {
          transition: width var(--media-transition-duration), height var(--media-transition-duration);
        }

        > .progress-bar {
          display: none;
        }
      }
    }
  }

  &.hiding {
    > div.zoomed {
      > article {
        img,
        video {
          object-fit: contain;
          transition: unset;
          width: 100% !important;
          height: 100% !important;
          transition: transform var(--media-transition-duration);
        }
      }
    }
  }

  &.zoomed {
    > div.zoomed {
      transition: unset;

      > header {
        opacity: 1;
      }

      > article {
        img,
        video {
          object-fit: contain;
          transition: unset;
          width: 100% !important;
          height: 100% !important;
        }

        > .progress-bar {
          display: block;
        }
      }

      &[data-snapping] {
        pointer-events: none;

        > article {
          img {
            transition: left ease-out 0.23s, top ease-out 0.23s;
          }

          > .progress-bar {
            opacity: 0;
          }
        }
      }

      > footer {
        opacity: 1;
      }

      &[data-type="video"] > article {
        video {
          opacity: 1;
          z-index: 3;
        }

        img {
          display: none;
        }
      }
    }
  }

  #no-media {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    text-align: center;
    display: none;

    &::before {
      content: "";
      background: 50% / contain no-repeat url(/img/icons/surprised-face.svg);
      filter: invert();
      width: 4rem;
      height: 4rem;
      display: block;
      margin: 0 auto 2em;
    }

    p {
      margin: 0 0 2rem;
      width: 9rem;
      height: 3rem;
    }

    button {
      background: linear-gradient(45deg, #bf1000, #ffe500), linear-gradient(102deg, #9000bb, #00aafa00);
      background-blend-mode: overlay;
      color: #fff;
      --horizontal-padding: 1rem;
    }
  }

  &[data-media-count="0"] {
    #no-media {
      display: block;
    }
    > header button.upload {
      display: none;
    }
  }

  &[data-media-count="1"],
  &[data-media-count="2"],
  &[data-media-count="3"],
  &[data-media-count="4"],
  &[data-media-count="5"] {
    padding-top: var(--header-height);
  }

  .context-menu {
    display: flex;
    opacity: 0;
    pointer-events: none;
    position: fixed;
    z-index: 1000;
    background: hsla(0, 0%, 19%, 0.7);
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    flex-direction: column;
    transform: scale(0.6) translateX(calc(-1 * var(--header-width)));
    transition: opacity 0.3s, transform cubic-bezier(0.46, 0.01, 0.15, 1.3) 0.3s;
    width: 230px;
    overflow: hidden;
    backdrop-filter: blur(20px);
    box-shadow: 0 0 50px rgb(0 0 0 / 50%);

    /* @starting-style {
      transform: scale(0.6) translateX(calc(-1 * var(--header-width)));
      opacity: 0;
    } */

    > button {
      background: none;
      border: none;
      text-align: left;
      width: 100%;
      font-size: 0.9rem;
      cursor: pointer;
      white-space: nowrap;
      color: #fff;
      border-radius: 0;

      &:not(:first-child) {
        border-top: 1px solid var(--button-highlight-color);
      }

      /* &:hover {
                background-color: #6a6a6c;
            } */

      > span {
        display: block;
        position: relative;
        padding-left: 1.5rem;

        [data-os="ios-pre25"] & {
          padding-left: 0;
        }

        &::after {
          content: "";
          position: absolute;
          right: var(--icon-position-right);
          left: var(--icon-position-left);
          top: 50%;
          transform: translateY(-50%);
          width: 1rem;
          height: 1rem;
          filter: invert();
        }
      }

      &.view span::after {
        background: 50% / contain no-repeat url("/img/icons/view.svg");
      }

      &.download span::after {
        background: 50% / contain no-repeat url("/img/icons/download.svg");
      }

      &.remove {
        display: none;
        color: var(--color-red);

        span::after {
          background: 50% / contain no-repeat url("/img/icons/trash.svg");
          filter: invert() brightness(0.3) sepia() hue-rotate(315deg) saturate(7);
        }
      }
    }

    &[data-remove] {
      > button.remove {
        display: block;
      }
    }
  }

  &[data-context-menu] {
    .context-menu {
      opacity: 1;
      pointer-events: auto;
      transform: scale(1) translateX(calc(-1 * var(--header-width)));
    }
  }
}

section#tips {
  > div {
    h2,
    h4 {
      color: #eae303;
    }

    h3 {
      margin: 0 0 0.8rem;
    }

    > div,
    > h2 {
      padding-top: 1rem;

      ul {
        padding-left: 1rem;

        li {
          line-height: 1.34em;

          > h4 {
            line-height: 1.34em;
          }
        }

        > li:not(:last-child) {
          margin-bottom: 0.75rem;
        }
      }
    }

    nav.pill {
      display: none;
    }

    details {
      &[open] {
        summary::before {
          content: "-";
          vertical-align: top;
        }
      }

      summary {
        list-style: none;
        position: relative;
        cursor: pointer;

        &::before {
          content: "+";
          vertical-align: top;
          width: 0.5rem;
          display: inline-block;
        }

        > h3 {
          display: inline-block;
          max-width: 90%;
        }

        + ul {
          margin-top: 0;
          padding-left: 2rem;
        }
      }
    }

    h4 {
      display: inline;
    }

    footer {
      font-size: 0.9rem;
    }
  }

  div.examples {
    img {
      display: block;
      margin: 1rem 0;
      width: calc(100% - 1rem);
      height: auto;
      aspect-ratio: 500 / 273;
      border-radius: 0.5rem;

      & + img {
        display: none;
      }
    }
  }
}

@media screen and (orientation: landscape) {
  body:not([data-page="my-event"]) #gallery {
    --header-height: 2.6rem;

    > header {
      background: var(--header-background-color);
      border-radius: var(--radius);
      width: var(--max-width);
      top: 5px;
      right: 5px;

      .upload-progress {
        border-radius: var(--radius);
      }
    }
  }
}

article[data-id] #gallery {
  > header {
    position: relative;
    flex: unset;
  }

  section#slideshow {
    display: none;
  }
}

dialog form section a.chevron-right {
  color: #fff;
  position: relative;
  text-decoration: none;
  padding-right: 1rem;

  &::after {
    content: "";
    position: absolute;
    width: 1rem;
    height: 1rem;
    background: 50% / contain no-repeat url(/img/icons/chevron-double.svg);
    filter: invert();
    right: 0;
    bottom: 0.1rem;
  }
}

@media all and (orientation: landscape) {
  #gallery div.zoomed > header,
  #gallery div.zoomed > footer {
    right: 1rem;

    > button.download {
      left: unset;
      right: 1rem;
      transform: translate(0, -4rem);
    }

    > button.remove {
      left: unset;
      right: 1rem;
      transform: translate(0, -7rem);
    }
  }
}

@media all and (orientation: portrait) {
  #gallery div.zoomed > header,
  #gallery div.zoomed > footer {
    left: 50%;
    transform: translateX(-50%);
  }
}

@media all and (max-width: 767px) {
  #gallery > div.context-menu > button:active {
    background: var(--button-highlight-color);
  }
}

@media all and (min-width: 768px) {
  #gallery > div.context-menu > button:hover {
    background: var(--button-highlight-color);
  }

  #gallery > header > button.upload {
    top: calc(100dvh - 6rem - var(--upload-y));
  }
}

@media all and (orientation: landscape) {
  #gallery {
    --upload-y: -1.5rem;
  }
}

@media all and (display-mode: fullscreen), all and (display-mode: standalone) {
  #gallery {
    --upload-y: 2rem;
  }
}

body:has(#gallery.zoomed) {
  overflow: hidden;
}

dialog.danger {
  text-align: center;
}

dialog.danger button.primary {
  background: linear-gradient(19deg, red, #ffa500), linear-gradient(8deg, #620000, #00aafa00);
}

dialog > form > button.close {
  position: absolute;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin: 0;
  background: none;
  right: 0;
  top: 0;

  > span {
    text-indent: 1000px;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;

    &::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      background: 50% / contain no-repeat url(/img/icons/add.svg);
      filter: invert();
      transform: rotate(45deg);
      right: 0;
    }
  }
}