@use "icon";

@use "item-actions";
@use "item-rules";
@use "new-items";
@use "status-bar";

$grey-light: #f4f4f4 !default;
$grey: #ececec !default;
$grey-dark: #999 !default;
$table-hover-background: #fff0eb !default;
$primary-color: #ff521f !default;

$row-inset: 2rem !default;
$row-height: 3rem !default;

$table-header-color: $grey !default;
$row-background-color: $grey-light !default;
$row-hover-color: $table-hover-background !default;
$icon-active-color: $primary-color !default;
$icon-passive-color: $grey-dark !default;

$status-published-background-color: #ebf9eb !default;
$status-published-border-color: #4dd45c !default;
$status-published-color: #4dd45c !default;

$status-draft-background-color: #fefaf3 !default;
$status-draft-border-color: #ffa800 !default;
$status-draft-color: #ffa800 !default;

$status-dirty-background-color: #eee !default;
$status-dirty-border-color: #888 !default;
$status-dirty-color: #aaa !default;

[data-controller="navigation--editor--menu"] {
  --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="navigation--editor--list"] {
  min-height: var(--row-height);

  // 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 6 {
      &[data-navigation-depth="#{$i}"] .tree {
        padding-left: calc(var(--row-inset) * #{$i});
      }
    }

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

    .title,
    .url {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

[data-controller="navigation--editor--menu"] [role="rowheader"],
[data-controller="navigation--editor--item"] {
  display: grid;
  grid-template-columns: 40% 2fr auto;
  padding: 0.25rem 0.5rem;
  gap: 1rem;
  align-items: center;
}

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

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

  &[data-state="draft"] {
    --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};
  }
}