#ticket-shop-catalog-editor-view {
  --catalog-border: 1px solid oklch(from var(--color-gray) 0.85 c h);
  --catalog-sidebar-default-width: clamp(22rem, 26.47%, 30rem);
  --catalog-sidebar-max-width: max(var(--catalog-sidebar-default-width), min(40rem, 40%));

  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: 100%;
  max-width: 96rem;
  height: 100%;
  max-height: min(92dvh, 100lvh - 0.8rem);

  &[sidebar-resizing] {
    cursor: ew-resize;
    user-select: none;
  }

  @media (width >= 1000px) and (height >= 700px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }

  > header[purpose="toolbar"] {
    > .sidebar-toggle {
      display: none;
    }

    > hr {
      flex: 1 1;
    }

    > .history-controls {
      margin-left: 0.8rem;
      display: flex;
      gap: 0.4rem;
    }
  }

  > h1[purpose="heading"] {
    justify-self: center;
    width: max-content;
    overflow: visible;
    font-weight: 500;
    text-align: center;

    > .heading-field {
      display: flex;
      justify-content: center;
      align-items: center;

      > select {
        border-radius: 100vmax;
        padding-block: 0;
        height: var(--viewkit-button-height);
        font-size: inherit;
        font-weight: inherit;
        color: inherit;
      }
    }
  }

  > main {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
  }

  .editor-tabs {
    border-top: var(--toolbar-border);
    min-height: calc(var(--viewkit-toolbar-height) + var(--viewkit-toolbar-border-width));
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .workspace {
    position: relative;
    min-height: 0;
    display: grid;
    grid-template-columns:
      clamp(
        var(--catalog-sidebar-default-width),
        var(--catalog-sidebar-width, var(--catalog-sidebar-default-width)),
        var(--catalog-sidebar-max-width)
      )
      minmax(0, 1fr);

    > .sidebar-backdrop {
      display: none;
    }

    > aside {
      anchor-name: --catalog-sidebar;
      border-right: var(--catalog-border);
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow-x: hidden;
      background: oklch(from var(--color-gray) 0.97 c h);

      &:has(+ .sidebar-resize:hover) {
        border-right-color: oklch(from var(--color-gray) 0.65 c h);
      }

      > .entry-toolbar {
        border-bottom: var(--catalog-border);
        padding: 0.8rem;
        display: flex;
        align-items: center;
        gap: 0.8rem;

        > .add,
        > .duplicate,
        > .delete {
          padding: 0;
        }

        > .duplicate {
          margin-right: auto;
        }

        > .move {
          display: flex;
          gap: 0.4rem;

          > button {
            padding: 0;
          }
        }

        > .delete {
          margin-left: auto;
        }
      }

      > .entry-infobar {
        border-top: var(--catalog-border);
        justify-content: center;
        color: gray;
        font-size: 1.3rem;
      }

      > .sidebar-empty {
        z-index: 1;
        grid-row: 2 / -1;
        grid-column: 1;
        min-height: 0;
      }
    }

    > .sidebar-resize {
      position: absolute;
      position-anchor: --catalog-sidebar;
      z-index: 3;
      top: anchor(top);
      bottom: anchor(bottom);
      left: anchor(right);
      translate: calc(-50% - 0.5px) 0;
      width: 5px;
      cursor: ew-resize;
      touch-action: none;
    }

    .entries {
      padding-block: 0.8rem;
      padding-inline: 0;
      min-width: 0;
      display: grid;
      grid-auto-rows: max-content;
      align-content: start;
      gap: 0;
      overflow-x: hidden;
      overflow-y: auto;
      list-style: none;

      > li {
        min-width: 0;
        overflow: hidden;

        &.separator {
          height: 0.8rem;

          > .select {
            padding: 0;
            height: 100%;
            min-height: 0;

            &[selected] {
              background: oklch(from var(--color-blue) l c h / 0.14);
            }
          }
        }

        > .select {
          position: relative;
          max-width: 100%;
          width: 100%;
          border-radius: 0;
          padding-block: 0.6rem;
          min-width: 0;
          height: 4.8rem;
          min-height: var(--viewkit-button-height);
          flex-direction: column;
          justify-content: start;
          align-items: start;
          gap: 0.2rem;
          overflow: hidden;
          background: transparent;

          &:has(> .id:empty) {
            justify-content: center;
          }

          > span {
            max-width: 100%;
            min-width: 0;
            line-height: 1.2;
            text-box: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:not(.id) {
              font-weight: 500;
            }

            &.draft-name {
              color: gray;
            }
          }

          > .id {
            color: gray;
            font-size: 1.2rem;
            font-weight: 400;

            &:empty {
              display: none;
            }
          }

          &[selected] {
            color: black;
            background: oklch(from var(--color-blue) l c h / 0.14);
          }

          &[edited] {
            padding-right: 2.8rem;

            &::after {
              position: absolute;
              top: 50%;
              right: 1.2rem;
              border-radius: 50%;
              width: 0.7rem;
              height: 0.7rem;
              background: var(--active-color);
              translate: 0 -50%;
              content: '';
            }
          }
        }

      }
    }
  }

  .editor-area {
    min-width: 0;
    min-height: 0;
    display: grid;

    > * {
      grid-row: 1;
      grid-column: 1;
    }

    > .editor-empty {
      z-index: 1;
      min-width: 0;
      min-height: 0;
    }
  }

  form.editor {
    padding: 1.6rem;
    min-width: 0;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 1.6rem;
    overflow-y: auto;

    > fieldset {
      border: var(--catalog-border);
      border-radius: 1.6rem;
      padding: 1.6rem;
      min-width: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.2rem 1.6rem;

      > legend {
        padding-inline: 0.6rem;
        font-weight: 500;
      }

      > .field-placeholder {
        min-width: 0;
      }

      > .field {
        min-width: 0;
        display: grid;
        align-content: start;
        gap: 0.4rem;

        &:has(> textarea),
        &.full {
          grid-column: 1 / -1;
        }

        > span {
          min-height: 2.4rem;
          display: flex;
          align-items: center;
          color: oklch(from var(--color-gray) 0.42 c h);
          font-size: 1.35rem;
          font-weight: 500;

          &:not(.field-label) {
            max-width: 100%;
            min-width: 0;
            display: block;
            overflow: hidden;
            line-height: 2.4rem;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        > .field-label {
          width: 100%;
          max-width: 100%;
          min-width: 0;
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          align-items: center;
          gap: 0.6rem;
          overflow: hidden;

          > span:first-child {
            flex: 1 1 auto;
            width: 0;
            max-width: 100%;
            min-width: 0;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            text-wrap: nowrap;
            white-space: nowrap;
          }

          > .link-button {
            border-radius: 100vmax;
            padding-inline: 0.7rem;
            min-width: 2.4rem;
            max-width: 70%;
            height: 2.4rem;
            display: block;
            overflow: hidden;
            color: var(--active-color);
            font-size: 1.2rem;
            line-height: 2.4rem;
            text-align: center;
            text-overflow: ellipsis;
            white-space: nowrap;
            background: var(--button-background-color);
            user-select: none;

            &[linked] {
              background: oklch(from var(--color-blue) l c h / 0.14);
            }
          }

          > .random-code {
            border-radius: 100vmax;
            padding: 0;
            width: 2.4rem;
            min-width: 2.4rem;
            height: 2.4rem;

            > img {
              width: 1.6rem;
              height: 1.6rem;
            }
          }
        }

        > .field-description {
          color: gray;
          font-size: 1.2rem;
          line-height: 1.35;
        }

        &[edited] {
          > span:not(.field-label),
          > .field-label > span:first-child {
            color: var(--active-color);
          }
        }

      }

      input,
      textarea,
      select {
        border: var(--catalog-border);
        border-radius: 1rem;
        padding: 0.8rem 1rem;
        width: 100%;
        min-width: 0;
        height: auto;
        color: black;
        background-color: white;
        font: inherit;

        &:disabled {
          color: gray;
          background-color: oklch(from var(--color-gray) 0.96 c h);
        }
      }

      select {
        padding-right: 3.4rem;
      }

      textarea {
        min-height: calc(2lh + 1.6rem + 2px);
        resize: none;
        field-sizing: content;

        &.content-sized {
          min-height: calc(5lh + 1.6rem + 2px);

          &.compact {
            min-height: calc(2lh + 1.6rem + 2px);
          }
        }
      }

    }
  }

  select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.6rem;
    padding-right: 3.4rem;
  }

  @media (width < 700px) {
    > header[purpose="toolbar"] > .sidebar-toggle {
      display: flex;
    }

    .workspace {
      position: relative;
      grid-template-columns: 1fr;

      > .sidebar-resize {
        display: none;
      }

      > aside {
        position: absolute;
        inset: 0 auto 0 0;
        z-index: 2;
        border-right: var(--catalog-border);
        width: min(30rem, calc(100% - 4rem));
        visibility: hidden;
        box-shadow: 0.4rem 0 1.6rem rgb(0 0 0 / 0.18);
        translate: -100% 0;
      }

      > .sidebar-backdrop {
        position: absolute;
        inset: 0;
        z-index: 1;
        border: 0;
        border-radius: 0;
        padding: 0;
        width: auto;
        height: auto;
        display: block;
        visibility: hidden;
        opacity: 0;
        background: rgb(0 0 0 / 0.2);
      }
    }

    &[sidebar-animate] .workspace {
      > aside {
        transition: translate 0.2s ease, visibility 0s linear 0.2s;
      }

      > .sidebar-backdrop {
        transition: opacity 0.2s ease, visibility 0s linear 0.2s;
      }
    }

    &[sidebar-open] .workspace {
      > aside {
        visibility: visible;
        translate: 0 0;
      }

      > .sidebar-backdrop {
        visibility: visible;
        opacity: 1;
      }
    }

    &[sidebar-animate][sidebar-open] .workspace {
      > aside,
      > .sidebar-backdrop {
        transition-delay: 0s;
      }
    }

    form.editor > fieldset {
      grid-template-columns: 1fr;

      > .field-placeholder {
        display: none;
      }

      > .field,
      > .field:has(> textarea) {
        grid-column: 1;
      }
    }
  }

  @media (width < 550px) {
    > header[purpose="toolbar"] > .history-controls {
      display: none;
    }
  }

  @media (width >= 1400px) {
    max-width: 136rem;

    form.editor {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
    }
  }
}

#ticket-shop-catalog-editor-view .icon-field {
  > button[data-icon-picker] {
    border: 1px solid oklch(from var(--color-gray) 0.85 c h);
    border-radius: 1rem;
    padding: 0.6rem 1rem;
    width: 100%;
    justify-content: start;
    gap: 0.8rem;
    background: white;
    font: inherit;
    font-weight: 400;

    &[aria-invalid="true"] {
      border-color: var(--color-red);
      outline-color: var(--color-red);
    }

    > .icon,
    > .icon-placeholder {
      width: 2.8rem;
      height: 2.8rem;
      flex: none;
    }

    > span {
      min-width: 0;
      overflow: hidden;
      font-weight: 400;
      line-height: 1.5;
      text-overflow: ellipsis;
      text-box: normal;
      white-space: nowrap;
    }
  }
}

#ticket-shop-catalog-icon-picker-view {
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: min(42rem, 100%);
  height: max-content;
  max-height: min(62rem, 80dvh);

  > h1[purpose="heading"] {
    font-weight: 500;
  }

  > main[purpose="content"] {
    padding: 0.8rem;
    min-height: 0;
    overflow-y: auto;

    > ol {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
      gap: 0.8rem;
      list-style: none;

      > li > button {
        border-radius: calc(var(--sheet-border-radius) - 0.8rem);
        padding: 1rem 0.6rem;
        width: 100%;
        height: auto;
        min-height: 8.8rem;
        flex-direction: column;
        gap: 0.6rem;
        font: inherit;
        font-weight: 400;

        &[selected] {
          color: var(--active-color);
          background: oklch(from var(--color-blue) l c h / 0.14);
        }

        > .icon {
          width: 4rem;
          height: 4rem;
          flex: none;
        }

        > span {
          max-width: 100%;
          overflow: hidden;
          font-size: 1.2rem;
          font-weight: 400;
          line-height: 1.4;
          text-overflow: ellipsis;
          text-box: normal;
          white-space: nowrap;
        }
      }
    }
  }

  @media (width >= 700px) and (height >= 700px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }
}

#ticket-shop-catalog-link-picker-view {
  border-top-left-radius: var(--sheet-border-radius);
  border-top-right-radius: var(--sheet-border-radius);
  width: min(42rem, 100%);
  height: min(62rem, 80dvh);

  > h1[purpose="heading"] {
    font-weight: 500;
  }

  > main[purpose="content"] {
    padding: 0;
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 1rem;
    overflow: hidden;

    > input {
      margin: 1.2rem 1.2rem 0;
      border: 1px solid oklch(from var(--color-gray) 0.85 c h);
      border-radius: 1rem;
      padding: 0.8rem 1rem;
      width: calc(100% - 2.4rem);
      min-width: 0;
      font: inherit;
    }

    > ol {
      grid-row: 2;
      grid-column: 1;
      padding: 0 1.2rem 1.2rem;
      min-height: 0;
      display: grid;
      grid-auto-rows: max-content;
      align-content: start;
      gap: 0.6rem;
      overflow-y: auto;
      list-style: none;

      > li > button {
        border-radius: 1rem;
        padding-block: 0.6rem;
        width: 100%;
        height: auto;
        min-height: var(--viewkit-button-height);
        flex-direction: column;
        align-items: start;
        gap: 0.2rem;

        > span,
        > small {
          line-height: 1.2;
          text-box: normal;
        }

        > small {
          color: gray;
          font-size: 1.2rem;
          font-weight: 400;
        }
      }
    }

    > p {
      grid-row: 2;
      grid-column: 1;
      margin: 0;
      padding: 1.2rem;
      align-self: center;
      color: gray;
      text-align: center;
    }
  }

  @media (width >= 700px) and (height >= 700px) {
    &:not([hidden]) {
      border-radius: var(--sheet-border-radius);
      translate: 0% calc((100vh - 100%) / -2);
    }
  }
}