@use '../global/common' as global;

/* GroupUnit
=============================== */

.acms-group-unit {
  // CSS変数のデフォルト値（JavaScript側から動的に設定される）
  --acms-group-unit-level-color: transparent;
  --acms-group-unit-text-color: #{global.$acms-color-system-gray80};
  --acms-group-unit-text-light: #{global.$acms-color-white};
  --acms-group-unit-text-dark: #{global.$acms-color-system-gray80};
  --acms-group-unit-color-level1: #{global.$acms-color-system-gray70};
  --acms-group-unit-color-level2: #{global.$acms-color-system-gray50};
  --acms-group-unit-color-level3: #{global.$acms-color-system-gray30};
  --acms-group-unit-gradient-start: var(--acms-group-unit-color-level3);
  --acms-group-unit-gradient-end: #{global.$acms-color-system-gray10};

  // Sticky Scroll用のCSS変数
  --acms-group-unit-depth: 0;
  --acms-group-unit-sticky-header-height: 32px;
  --acms-group-unit-sticky-footer-height: 32px;

  position: relative;
  padding-left: 8px;

  &::before {
    position: absolute;
    inset: 16px 0;
    display: block;
    content: '';
    border-left: 2px solid var(--acms-group-unit-level-color);
  }
}

/* 非表示のとき */
.acms-unit[data-unit-status='close'] .acms-group-unit {
  --acms-group-unit-level-color: #{global.$acms-color-system-gray20};
  --acms-group-unit-text-color: #{global.$acms-color-system-gray80};

  .acms-group-unit-start .acms-unit-toolbar,
  .acms-group-unit-end .acms-unit-toolbar {
    --acms-unit-toolbar-color: #{global.$acms-color-system-gray80};
    --acms-unit-toolbar-vr-color: #{global.$acms-color-system-gray40};
  }

  .acms-group-unit-start .acms-unit-toolbar-button,
  .acms-group-unit-end .acms-unit-toolbar-button {
    --acms-unit-toolbar-button-disabled-color: #{global.$acms-color-system-gray40};
  }
}

.acms-group-unit-start {
  position: relative;

  // z-indexはReact側でstyle属性として設定される
  display: flex;
  align-items: center;
  height: var(--acms-group-unit-sticky-header-height);
  margin-bottom: 16px;
  background-color: var(--acms-group-unit-level-color);
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 #3333;

  &::before {
    position: absolute;
    top: 15px;
    left: -8px;
    display: block;
    width: 9px;
    height: 2px;
    content: '';
    background-color: var(--acms-group-unit-level-color);
  }

  // ツールバーのカラーをCSS変数から継承
  .acms-unit-toolbar {
    --acms-unit-toolbar-color: var(--acms-group-unit-text-color);
    --acms-unit-toolbar-vr-color: var(--acms-group-unit-text-color);
  }

  .acms-unit-toolbar-button {
    --acms-unit-toolbar-button-hover-color: var(--acms-group-unit-text-color);
  }
}

.acms-group-unit-content {
  // group-unit-start（sticky header）と兄弟関係にあり、position指定を持たないため
  // 通常フローの描画レイヤーに属する（positionedなgroup-unit-startより常に下）。
  // ただし配下に z-index を持つ子孫（.js-media-unit 等）がいると、isolationが無いと
  // そのz-indexが親コンテキストまで漏れ出し、group-unit-startのsticky z-indexと直接
  // 競合してしまう（同値の場合DOM順で後勝ちのため、sticky headerが子孫の下に隠れる）。
  // isolationでスタッキングコンテキストを閉じ込め、子孫のz-indexをこの箱の中に封じる。
  isolation: isolate;
}

.acms-group-unit-end {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--acms-group-unit-sticky-footer-height);
  background-color: var(--acms-group-unit-level-color);
  border-radius: 6px;
  box-shadow: 0 1px 4px 0 #3333;

  &::before {
    position: absolute;
    top: 15px;
    left: -8px;
    display: block;
    width: 9px;
    height: 2px;
    content: '';
    background-color: var(--acms-group-unit-level-color);
  }

  // ツールバーのカラーをCSS変数から継承
  .acms-unit-toolbar {
    --acms-unit-toolbar-color: var(--acms-group-unit-text-color);
    --acms-unit-toolbar-vr-color: var(--acms-group-unit-text-color);
  }

  .acms-unit-toolbar-button {
    --acms-unit-toolbar-button-hover-color: var(--acms-group-unit-text-color);
  }
}

.acms-unit[data-unit-type='group'][data-unit-children-count='0']:not([data-unit-collapsed='true']) > .acms-group-unit {
  .acms-group-unit-start {
    margin-bottom: 0;
  }
}
