@use "variables" as *;

@use "icon";

@use "figure";
@use "item-actions";
@use "item-rules";
@use "new-items";
@use "status-bar";
@use "table";
@use "trix";
@use "trix-rails";

$max-nesting: 8 !default;

[data-controller="content--editor--container"] {
  --row-height: #{$row-height};
  --row-inset: #{$row-inset};
  --table-header-color: #{$table-header-color};
  --row-background-color: #{$row-background-color};
  --row-hover-color: #{$row-hover-color};
  --icon-active-color: #{$icon-active-color};
  --icon-passive-color: #{$icon-passive-color};

  ol,
  li {
    margin: 0;
    padding: 0;
    padding-inline-start: 0;
    list-style: none;
  }

  .hidden {
    display: none !important;
  }
}

[data-controller="content--editor--list"] {
  min-height: calc(var(--row-height) * 8);

  // tree items
  & > li {
    display: block;
    min-height: var(--row-height);

    // https://github.com/react-dnd/react-dnd/issues/832
    transform: translate3d(0, 0, 0);

    // Pinstripe effect
    &:nth-of-type(even) {
      background: var(--row-background-color);
    }

    &:hover {
      background: var(--row-hover-color);
    }

    &[draggable] {
      cursor: grab;
    }

    // Dragged visuals
    &[data-dragging] {
      box-shadow: inset 0 0 0 2px var(--icon-passive-color);

      > * {
        visibility: hidden;
      }
    }

    // Depth spacing
    @for $i from 1 through $max-nesting {
      &[data-content-depth="#{$i}"] .tree {
        padding-left: calc(var(--row-inset) * #{$i});
      }
    }

    .tree {
      display: flex;
      align-items: center;
    }

    .heading {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

[data-controller="content--editor--container"] [role="rowheader"],
[data-controller="content--editor--item"] {
  display: grid;
  grid-template-columns: minmax(10rem, calc(100% - 12rem)) 1fr 10rem;
  padding: 0.25rem 0.5rem;
  gap: 1rem;
  align-items: center;
}

[data-controller="content--editor--item"] {
  .item-background::before {
    content: "A";
    font-family: cursive;
    display: inline-block;
    min-height: 1rem;
    min-width: 1rem;
    text-align: center;
    color: var(--theme-text-color);
    background-color: var(--theme-background-color);
    border: 1px solid var(--theme-border-color);
    border-radius: 2px;
  }

  .item-background.light {
    --theme-text-color: black;
    --theme-border-color: black;
    --theme-background-color: white;
  }

  .item-background.dark {
    --theme-text-color: white;
    --theme-border-color: white;
    --theme-background-color: black;
  }
}

// Ensures vertical alignment of header with rows
[data-controller="content--editor--container"] {
  [role="rowheader"] {
    min-height: var(--row-height);
    background: var(--table-header-color);
    padding-inline: 1.25rem 1rem;
  }
}

[data-controller="content--editor--status-bar"] {
  --background: #{$status-published-background-color};
  --color: #{$status-published-border-color};
  --border: #{$status-published-color};

  &[data-state="draft"],
  &[data-state="unpublished"] {
    --background: #{$status-draft-background-color};
    --color: #{$status-draft-border-color};
    --border: #{$status-draft-color};
  }

  &[data-state="dirty"] {
    --background: #{$status-dirty-background-color};
    --color: #{$status-dirty-border-color};
    --border: #{$status-dirty-color};
  }
}

[data-controller="content--editor--image-field"] {
  --icon-passive-color: #{$icon-passive-color};
}