:root {
  color-scheme: light dark;
}
h2 {
  small {
    font-size: .5em;
  }
}
textarea {
  font-size: 13px;
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
}
summary {
  h2 {
    display: inline
  }
}
canvas, .editor-thumbnails img {
  /* background-color: lightgreen; */
  border: 1px solid lightgray;
  border-radius: 12px;
}
// UI
body {
  font-family: "Geneva", "Helvetica", sans-serif;
}

/* Shared base styles */
button, textarea, select, input:not([type]), .button {
  appearance: none;
  font-size: 13px;
  border: 2px solid transparent;
  border-color: var(--next-border);
  background: var(--next-gray);
  padding: 4px 12px;
}

button:active {
  border-color: var(--next-border-inset) !important;
}
textarea, input:not([type="color"]) {
  background: var(--next-bg);
  border-color: var(--next-border-inset);
  padding: 5px;
  border-radius: 0 !important;
  /* min-width: 10rem; */
}
select {
  padding-inline: .5rem;
  border-radius: 0;
  position: relative;
  &:after {
    content: "‸";
    transform: rotateX(180deg);
    display: inline;
  }
}
textarea:focus, select:focus {
  outline: 1px solid #000;
}

.socials-carousel-builder {
  --next-bg: #ffffff;
  --next-gray: #cccccc;
  --next-light: #ffffff;
  --next-dark: #666666;
  --next-border-inset: var(--next-dark) var(--next-light) var(--next-light) var(--next-dark);
  --next-border: var(--next-light) var(--next-dark) var(--next-dark) var(--next-light);
  
  background-color: light-dark(#fff, #111);
  padding-inline: 2rem;
  /* padding-block-start: 1rem; */
  // border-radius: 24px;
  clip-path: border-box;
}

.tools {
  display: flex;
  flex-flow: column wrap;
  
  gap: .25rem;
  .slide-positioning {
    display: flex;
    flex-flow: row wrap;
    button {
      flex: 1;
    }
  }
}

.templates-tools {
  display: flex;
  flex-flow: column;
  max-width: 280px;
  
  input {
    border-color: var(--next-light) var(--next-dark) var(--next-dark) var(--next-light);
    background: var(--next-gray);
    width: 100%;
  }
  button {
    text-align: left;
  }
}
.editor-thumbnails, .editor-data, .editor {
  margin-inline: -2rem;
  margin-block: 1rem;
  padding: 1rem  2rem;
  
  .images {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-items: center;
    gap: .5rem;
    margin-block: 1rem;
    width: 100%;
    overflow-x: scroll;
    > div {
      display: block;
      flex-flow: row wrap;
      place-items: stretch;
      justify-items: stretch;
      gap: .25rem;
      img {
        max-height: 140px !important;
        width: auto !important;
      }
      button {
        font-size: .75em !important;
      }
    }
  }
  
  img.selected {
    border: 1px solid cyan;
    box-shadow: 0 0 5px cyan,  0 0 5px cyan;
  }
  h2 {
    margin-top: 0;
  }
}
.editor-data {
  margin-block-start: 0;
  display: flex;
  gap: 1rem;
  h3 {
    flex-basis: 100%;
  }
  .source-data {
    /* display: flex;
    flex-flow: row wrap;
    gap: 1rem; */
    .buttons {
      flex-basis: 100%;
      display: flex;
      flex-flow: row wrap;
      align-items: baseline;
      gap: .5em;
      margin-block-start: .5em;
    }
  }
  textarea + button {
    display: block;
  }
}
.editor, .editor-data {
  background-color: rgba(128,128,128,0.25);
}

.fabric-canvas {
  display: grid;
  grid-template-columns: minmax(150px, 200px) min-content minmax(150px, 1.5fr);
  gap: 1rem;
  position: relative;
  
  :is(canvas, .canvas-container) {
    /* aspect-ratio: 1080 / 1350; */
    max-width: 500px !important;
    height: auto !important;
  }
  &[data-drag="over"] {
    opacity: 0.8;
    &:after {
      position: absolute;
      display: flex;
      place-items: center;
      background: canvas;
      content: "Drop image";
      inset: auto;
      width: 100px;
      height: 100px;
      border: 2px dashed cyan;
      padding: 3rem;
      border-radius: 24px;
    }
  }
}
.layers {
  display: flex;
  flex-flow: column;
  gap: .5rem;
  color-scheme: light;
  color: #111;
  > div:not(.json-properties-editor) {
    background-color: light-dark(#f0f0f0, #111);
    border: 2px solid;
    border-color: var(--next-border-inset);
    padding: .5rem;
    /* border-radius: 2px; */
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    &[data-selected=true] {
      background-color: light-dark(#eee, #333);
      border-color: cyan;
    }
    label {
      white-space: nowrap;
      display: flex;
      flex-flow: row nowrap;
      position: relative;
      > i {
        flex: 0 0 1rem;
        margin-right: .5rem;
      }
      span.lock {
        position: absolute;
        right: 0;
        margin-left: auto;
        background-color: light-dark(#f0f0f0, #111);
      }
      /* background-color: */
    }
  }
  textarea {
    width: 100%;
    min-height: 25em;
    flex-basis: 100%;
    flex-grow: 1;
    white-space: pre-wrap;
    /* flex: 1; */
  }
}
.toolbar {
  /* padding-block: .5rem; */
  border-collapse: collapse;
  display: flex;
  flex-flow: column;
  grid-template-columns: 1fr;
  grid-template-rows: repeat(auto-fill, minmax(2rem, 1fr));
  gap: .5rem;
  /* max-width: 150px; */
  
  button {
    appearance: none;
    /* border: 1px solid rgba(128,128,128,0.25); */
    padding: .25rem .5rem;
    
    /* border-radius: 4px; */
    background: none;
    text-align: left;
    i {
      margin-inline-end: .5em;
    }
    overflow: hidden;
    /* &:nth-child(n+3) {
      border-left: none;
    } */
  }
  select {
    max-width: 100%;
  }
  & > .debug {
    max-width:100%;
    word-wrap: anywhere;
    font-family: monospace;
    font-size: 9px;
  }
  .json-properties-editor, textarea {
    display: grid;
    min-height: 13rem;
    gap: .5rem;
    &[data-state="changed"] {
      textarea {
        border-color: orange;
      }
    }
  }
}

hr {
  margin-block: 1rem;
}

.data-management {
  padding-bottom: 1rem;
  
  button.copy {
    position: relative;
    transition: all 300ms;
    &:after {
      display: block;
      position: absolute;
      left: 3em;
      top: -.25em;
      border-radius: 4px;
      color: white;
      content: "Copied!";
      pointer-events: none;
      opacity: 0;
      background: green;
      padding: .25em;
      transition: all 300ms;
    }
    &.copying {
      &:after {
        opacity: 1;
      }
    }
  }
  
  .data-current {
    .json-properties-editor {
      display: grid;
      gap: .25rem;
    }
  }
}

// wp stuff
#selectable-posts-for-editor {
  margin-block: 1rem;
}