cms-array {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: 0.5rem;

  > ul {
    display: flex;
    gap: 0.5rem;

    button {
      background: transparent;
      border: none;
      text-decoration: underline;
    }
  }

  > ol {
    gap: 1rem;
    grid-column: 1 / span 2;

    &,
    > li > article {
      display: flex;
      flex-direction: column;
    }

    > li {
      article {
        border: 1px solid rgb(74, 74, 74);
        border-radius: 0.25rem;
        overflow: hidden;
    
        > header {
          align-items: center;
          background: light-dark(rgb(221, 221, 221), rgb(34, 34, 34));
          display: flex;
          gap: 1rem;
          padding: 0.5rem 1rem;
    
          &:has(input:checked) {
            lucide-icon:first-of-type {
              display: none;
            }
          }
    
          &:has(input:not(:checked)) {
            lucide-icon:last-of-type,
            + cms-object {
              display: none;
            }
          }
    
          h4 {
            flex: 1;
          }
    
          select {
            background: transparent;
            border: none;
            padding: 0;
            width: 1rem;
          }
    
          label {
            cursor: pointer;
          }
        }
  
        > cms-object {
          padding: 1rem;
        }
      }

      > button {
        align-items: center;
        background: transparent;
        border: none;
        color: light-dark(rgb(114, 114, 114), rgb(141, 141, 141));
        display: flex;
        gap: 0.5rem;
        padding: 0;

        &:hover {
          color: light-dark(rgb(20, 20, 20), rgb(235, 235, 235));
        }

        lucide-icon {
          border: 1px solid rgb(141, 141, 141);
          border-radius: 100%;
          padding: 0.125rem;
        }
      }
    }
  }

  > dialog {
    padding: 3.125rem 3.75rem;

    button[name="close"] {
      background: transparent;
      border: none;
      margin-left: auto;
      padding: 0;
      position: absolute;
      right: 1rem;

      lucide-icon {
        width: 2rem;
      }
    }

    ul {
      display: grid;
      gap: 1.25rem;
      grid-template-columns: repeat(6, 1fr);
    }

    label {
      align-items: flex-end;
      aspect-ratio: 1.5;
      background: light-dark(rgb(221, 221, 221), rgb(34, 34, 34));
      border: 1px solid rgb(60, 60, 60);
      border-radius: 0.25rem;
      cursor: pointer;
      display: flex;
      justify-content: center;
      padding: 0.625rem;

      &:hover {
        border-color: light-dark(rgb(141, 141, 141), rgb(114, 114, 114));
      }
    }
  }
}
