@use 'sass:math';
@use '../global/common' as global;

/* ------------------------------
 編集ページ
------------------------------- */

// ---------------
// タイトル
// ---------------
// title1
.acms-admin-title {
  margin-top: 0;
  margin-bottom: 20px;
  line-height: 1.3;
  color: global.$acms-admin-title-textcolor;

  @include global.font-size(20);
}

// title2
.acms-admin-title2 {
  padding: 0;
  margin: 10px 0;
  color: global.$acms-admin-title2-textcolor;

  @include global.font-size(14);

  * + & {
    margin-top: 50px;
  }
}

.acms-tabs-panel {
  .acms-admin-title2 {
    padding: 3px 5px;
    margin: 0 0 10px;
    background: global.$acms-color-gray20;
  }
}

// title3
.acms-admin-title3 {
  padding: 5px 10px;
  margin: 0 0 10px;
  color: global.$acms-color-black;
  background: global.$base-bg-light-gray;

  @include global.font-size(14);

  & + .acms-table-admin {
    margin-top: -10px;
  }
}

.acms-title-info {
  display: inline-block;
  padding: 0;
  margin: 0;
  font-weight: bold;
  line-height: 1.5;
  list-style: none;

  @include global.font-size(14);
}

.acms-title-info-item {
  display: inline-block;
  margin: 0 10px 5px 0;
}

.acms-title-info-item-name {
  margin: 0 10px 0 0;
}

.acms-page-header-detail {
  display: flex;
  width: 100%;
}

.acms-page-header-title {
  flex: 1;
}

.acms-page-header-side {
  margin-left: auto;
}

.acms-page-header-btn {
  margin: 0;
}

// ---------------
// ユニット追加
// ---------------
.acms-unit-add-btn {
  display: flex;
  flex-direction: column;
  padding: 10px 10px 0;
  margin: 10px;
  background: global.$edit-entry-bg-color-base;
  border: solid 1px global.$edit-entry-bg-color-dark;
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);

  @include global.clearfix;

  &:hover {
    box-shadow: 0 1px 1px 1px rgb(0 0 0 / 10%);
  }

  .acms-unit-add-btn-handle {
    position: relative;
    display: flex;
    align-items: center;
  }
}

/* ---------------
ユニット
--------------- */

/* ---------------
投稿フォーム関連表示設定
--------------- */

/* 投稿フォーム */
#entryForm {
  --acms-entry-form-width: 880px;

  margin: 0 -10px;
}

/* 投稿フォーム基本情報 */
.entryFormHead {
  margin: 0 -10px 20px;
}

/* 投稿フォーム内容の囲み */
.entryFormWrapper {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 10px 10px 80px;
  background: global.$acms-color-system-gray10 !important;
  border-radius: 6px;

  @include global.font-size(14);
}

@include global.media-breakpoint-up(md) {
  #entryForm {
    max-width: var(--acms-entry-form-width);
    margin: 0 auto;
  }

  .entryFormHead {
    margin: 0 0 13px;
  }

  .entryFormWrapper {
    padding: 13px 20px 80px;
  }
}

/* 投稿フォーム用基本テーブル */
.entryFormTable {
  width: 100% !important;
  margin: 0 0 10px !important;
  border-collapse: collapse !important;
  border: none !important;

  [class*='validator-result'] {
    margin: 0;
  }

  th,
  td {
    color: global.$acms-color-black !important;
    border: none !important;
  }

  th {
    padding: 7px 10px 0 !important;
    white-space: nowrap;
  }

  td {
    padding: 7px 10px !important;
  }

  .thY {
    width: 30%;
  }
}

@include global.media-breakpoint-up(md) {
  .entryFormTable th {
    width: 10em;
    padding: 7px 10px !important;
    text-align: right;
  }
}

.entryFormTable {
  .entryFormDateBlockWrap {
    display: block;
    margin: 0;
  }

  .entryFormDateBlock {
    display: block;
  }
}

.entryFormDateLabel,
.entryFormTimeLabel {
  display: inline-block;
  margin: 10px 0;
  vertical-align: middle;
}

.entryFormDateLabel {
  display: inline-block;
  margin: 0 0 10px;
  vertical-align: middle;
}

.entryFormTimeLabel {
  margin-top: 14px;
}

@include global.media-breakpoint-up(md) {
  .entryFormTable {
    .entryFormDateBlockWrap {
      display: inline-block;
    }

    .entryFormDateBlock {
      display: inline-block;
      width: 150px;
      margin-right: 10px;
      vertical-align: middle;
    }

    .entryFormDateLabel,
    .entryFormTimeLabel {
      margin: 0;
    }
  }
}

/* 画像ユニットのドラッグアンドドロップ */
.js-drop_area {
  position: relative;
}

.acms-drop-area-wrap {
  position: absolute;
  inset: 0;

  .js-drop_area & {
    display: none;
  }

  .drag-n-drop-hover & {
    display: block;
  }
}

.drag-n-drop-hover .acms-drop-area {
  z-index: global.zIndex(acms-drop-area);
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;

  &::before {
    position: absolute;
    inset: -10px;
    z-index: global.zIndex(acms-drop-area-before);
    content: '';
    background: global.$acms-color-white;
    border: 3px global.$acms-color-info70 dashed;
  }
}

.acms-drop-area-inner {
  display: none;
  text-align: center;

  .drag-n-drop-hover & {
    position: relative;
    z-index: global.zIndex(acms-drop-area-inner);
    display: table-cell;
    vertical-align: middle;
  }
}

.acms-drop-area-icon {
  font-size: 30px;
  color: global.$acms-color-info70;
}

.acms-drop-area-text {
  font-size: 14px;
  color: global.$acms-color-info70;
}

/* 動的フォーム テーブル */
.entryDynamicFormTable {
  width: 100%;
  border: none !important;

  th {
    font-weight: bold;
  }
}

.acms-unit-content {
  .entryDynamicFormTable th,
  .entryDynamicFormTable td,
  .formUnitGroupOption th,
  .formUnitGroupOption td,
  .formUnitLabel th,
  .formUnitLabel td,
  .entryFormImageTable th,
  .entryFormImageTable td {
    padding: 5px 10px !important;
    background-color: transparent !important;
  }
}

#entryForm .acms-unit-content {
  .formUnitGroupOption .formUnitGroupOptionValue {
    padding: 5px 10px !important;
  }

  .entryDynamicFormTable .formUnitGroupValue {
    width: 80% !important;
  }
}

@include global.media-breakpoint-down(md) {
  .entryDynamicFormTable .detail-column-body {
    background: #eee;
    border-top: 1px solid global.$acms-color-gray50;

    &:first-child {
      border-top: 0;
    }
  }

  .acms-unit-content {
    .formUnitLabel th,
    .formUnitLabel td {
      display: block;
    }

    table td.acms-border-bottom-sp {
      border-bottom: global.$acms-table-border !important;
    }
  }
}

@include global.media-breakpoint-up(md) {
  #entryForm {
    .acms-unit-content {
      .formUnitGroupOption {
        .formUnitGroupOptionValue {
          width: 70px !important;
          padding: 5px !important;
        }

        .formUnitGroupOptionCell {
          width: 1%;
        }
      }
    }
  }
}

/* 投稿フォーム用基本テーブル（カラムごとの各設定） */
.entryFormColumnSettingTable {
  width: 100%;
  table-layout: fixed;
  border: none;

  th {
    width: 8em;
    text-align: right;
    background-color: transparent;
  }

  th,
  td {
    border: none;
  }
}

/* エントリー作成画面のプルダウンとinput */
.acms-form-edit {
  margin: 0;

  @if global.$admin == true {
    font-family: global.$acms-admin-font-family;
  }
}

.acms-form-edit {
  select,
  input[type='text'],
  input[type='password'],
  input[type='datetime'],
  input[type='datetime-local'],
  input[type='date'],
  input[type='month'],
  input[type='time'],
  input[type='week'],
  input[type='number'],
  input[type='email'],
  input[type='url'],
  input[type='search'],
  input[type='tel'] {
    width: auto;
    height: auto;
    margin: 0;
  }

  textarea {
    margin: 0;
  }

  .acms-form-width-large,
  input.acms-form-width-large,
  .acms-form-width-medium,
  input.acms-form-width-medium,
  .acms-form-width-small,
  input.acms-form-width-small,
  .acms-form-width-mini,
  input.acms-form-width-mini {
    width: 100%;
  }

  .acms-form-width-full,
  input.acms-form-width-full {
    width: 100%;
  }

  .acms-form-width-3quarters,
  input.acms-form-width-3quarters {
    width: 75%;
  }

  .acms-form-width-half,
  input.acms-form-width-half {
    width: 50%;
  }

  .acms-form-width-quarter,
  input.acms-form-width-quarter {
    width: 25%;
  }

  .acms-hide-pc {
    display: none;
  }
}

// ---------------
// アコーディオン
// ---------------
.acms-accordion {
  margin: 0 0 10px;
}

.acms-accordion-title {
  margin: 0;

  [class*='acms-icon'] {
    margin: 0 0 0 5px;
  }
}

.acms-accordion-title-link, // 非推奨のクラス名
.acms-accordion-button {
  display: block;
  padding: 7px 0;
  font-weight: bold;
  line-height: 1.15;
  color: global.$acms-color-black;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: global.$acms-color-system-gray20;
  border-radius: 6px;

  @include global.font-size(14);

  &:hover {
    color: global.$acms-color-black;
    text-decoration: none;
    background-color: global.$acms-color-system-gray30;
    opacity: 1;
  }

  &::-webkit-details-marker {
    /* Safariで表示されるデフォルトの三角形アイコンを消します */
    display: none;
  }
}

.acms-accordion-inner, // 非推奨のクラス名
.acms-accordion-panel {
  padding-top: 10px;
  padding-bottom: 10px;
  background: global.$acms-color-system-gray10;
}

.acms-icon-mute {
  color: global.$acms-color-gray70;
}

.acms-edit-icon-btn {
  @include global.font-size(18);
}

// ---------------
// カスタムフィールド用テーブル
// ---------------
.entryFormWrapper {
  .acms-admin-title2 {
    padding: 5px 10px;
    margin: 0 0 10px;
    background: global.$acms-color-system-gray20;
  }

  .acms-table-admin {
    th,
    td {
      background: transparent;
    }
  }

  .acms-table-heading {
    th {
      background: global.$acms-color-system-gray20;
    }
  }
}

table.entryFormColumnTable {
  width: 100%;
  margin: 0;
  background-color: transparent !important;
  border: none;

  th,
  td {
    border: none;
  }
}

table td.entryFormFileControl {
  vertical-align: top;

  &,
  th,
  td {
    background-color: transparent !important;
    border: none !important;

    @include global.font-size(13);
  }

  th {
    padding-right: 10px !important;
  }

  dt {
    @include global.font-size(13);
  }
}

.entryFormFileControlSelects {
  max-width: 400px;
  margin: 0 -5px 10px;

  @include global.clearfix;
}

.entryFormFileControlSelectsItem {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding: 0 5px;

  select {
    width: 100%;
  }
}

.entryFormColumnTable img {
  box-sizing: border-box;
  display: block;
  max-width: 100%;
  height: auto;
  padding: 1px;
}

// ダイレクト編集 inputの長さ
.entryFormFileControl .acms-form-width-large {
  width: 300px;
}

.acms-unit-content .entryFormColumnTable th,
.acms-unit-content .entryFormColumnTable td {
  padding-bottom: 5px !important;
}

@include global.media-breakpoint-down(md) {
  .entryFormColumnTable th,
  .entryFormColumnTable td {
    box-sizing: border-box;
    display: block;
    width: 100%;
  }
}

/* 投稿フォーム画像詳細 */
.entryFormImageTable {
  width: 100%;
  padding: 10px;
  margin: 5px 0 0 !important;
  border-collapse: collapse;
  background-color: global.$edit-entry-bg-color-light !important;
  border: none;

  /* フォームアイテムのサイズ調整 */
  .entryFormInputText {
    width: 180px;
  }

  th {
    width: 10em;
    text-align: right;
    background-color: global.$acms-color-gray10;
  }

  td {
    padding: 5px 10px !important;
  }

  @include global.media-breakpoint-down(md) {
    th {
      text-align: left;
    }

    th,
    td {
      padding-right: 10px !important;
      padding-left: 10px !important;
    }

    .acms-select-block {
      margin: 5px 0;
    }
  }

  // 画像サイズ 大
  .imageLargeSize {
    margin-left: 15px;
  }
}

.entryFormMapTable {
  th,
  td {
    padding: 5px !important;
  }
}

@include global.media-breakpoint-down(md) {
  .acms-form .entryFormMapTable input.acms-form-width-mini {
    width: 100%;
  }

  .formColumnMap {
    .entryFormMapTable {
      display: table;
      width: 100%;

      th,
      td {
        display: table-cell;
        width: auto;
      }
    }
  }
}

.entryFormImageTable,
.formColumnMap .entryFormImageTable,
.entryFormColumnSettingTable .entryFormImageTable {
  background-color: global.$edit-entry-bg-color-light !important;
}

/* LiteEditor */
.entryFormLiteEditor + textarea {
  width: 100%;
  margin-bottom: 0;
}

.acms-btn .lite-editor-emoji-font {
  font-size: 11px;
}

.acms-unit-content {
  .lite-editor-toolbox {
    margin-top: 10px;
    background-color: transparent;
    border: none;
  }

  .lite-editor-select-wrap label {
    display: inline-block;
    margin-right: 5px;
    margin-left: 5px;
  }

  .lite-editor-toolbox .acms-btn-group > .acms-btn {
    height: auto;
  }

  .lite-editor-select {
    margin-bottom: 5px;
  }

  .acms-btn-group {
    padding: 0;
  }

  .lite-editor-toolbox {
    padding: 0;
  }

  .lite-editor-select-wrap {
    padding: 0 10px 0 0;
  }

  .lite-editor-btn-group-wrap .acms-btn-group {
    float: left;
    margin-right: 10px;
  }
}

.acms-unit-content > [data-id] {
  position: relative;
}

@include global.media-breakpoint-up(md) {
  .acms-unit-content {
    .lite-editor-select {
      margin-bottom: 0;
    }
  }
}

.acms-unit-content dl dd,
.acms-unit-content dl dt {
  padding-bottom: 8px;
  margin-left: 0;
}

.entryFormFileentryFormImages {
  width: 100%;

  a {
    display: block;
  }
}

.acms-unit-content .entryFormFileentryFormImages,
.acms-unit-content .formColumnMapTd {
  background-color: transparent !important;
}

// noImage
.entryFormFileentryFormImages .acms-icon-unit-image {
  color: global.$acms-color-gray70;
  text-align: center;

  @include global.font-size(100);
}

@include global.media-breakpoint-up(md) {
  .entryFormFileentryFormImages {
    width: 150px;
    padding-right: 20px;
    vertical-align: top;
  }
}

@include global.media-breakpoint-up(lg) {
  .entryFormFileentryFormImages {
    width: 320px;
  }
}

/* タグ候補 */
#tag-assist {
  padding: 0;
  margin: 10px -3px 0;
  text-align: left;

  li {
    display: inline-block;
    _display: inline;
    margin: 3px;
    white-space: nowrap;
    _zoom: 1;
  }

  a {
    display: inline-block;
    padding: 5px;
    line-height: 1;
    border: 1px solid global.$acms-color-gray80;
    border-radius: 5px;

    &:hover {
      background-color: global.$acms-color-gray50;
    }
  }
}

/* 地図 */
.formColumnMap {
  width: 100%;
  table-layout: fixed;
}

.formColumnMapTd {
  vertical-align: top;
}

.js-open-street-map-picker,
.acms-osm-view {
  width: 100%;
  height: 0;
  padding-bottom: 62.5%;
}

.acms-osm-container {
  position: relative;
  max-width: 818px;
}

.acms-gmap-container {
  max-width: 100%;
  overflow: hidden;
}

// スマートフォン：マップのスタイル
@include global.media-breakpoint-down(md) {
  .formColumnMap th,
  .formColumnMap td {
    display: block;
  }
}

.entryFormFilePreview {
  width: 74px; // アイコン幅
  padding-right: 20px;
  vertical-align: top;

  .entryFormFileIcon,
  .acms-form-checkbox {
    margin-bottom: 0;
  }
}

.entryFormFileName {
  margin: 0;
}

// スマートフォン：ファイルのスタイル
@include global.media-breakpoint-down(md) {
  .entryFormFileName {
    margin-top: 0;
  }

  .entryFormFilePreview {
    position: relative;
    width: auto;
    padding-right: 0;
  }

  .entryFormColumnSettingTable th {
    text-align: left;
  }
}

/* 投稿フォームスティッキーコンテナ */
.acms-entry-form-sticky-container {
  position: sticky;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: global.zIndex(entry-form-sticky-container);
  width: 100%;
  background-color: global.$acms-color-white;
  border-top: 1px solid global.$acms-color-gray60;
}

.acms-entry-form-action {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  background-color: global.$edit-entry-bg-color-white;
  border: 1px solid global.$edit-entry-bg-color-base;
}

.acms-entry-form-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

/* フォームのプライマリボタン */
.acms-entry-form-action-primary {
  display: grid;
  flex: 1 1 auto;
}

@include global.media-breakpoint-up(md) {
  .acms-entry-form-action-primary {
    flex: 0 1 auto;
  }
}

/* リビジョンフォーム */
.acms-entry-form-action-group-revision {
  width: 100%;

  > * {
    flex-basis: 100%;
  }
}

@include global.media-breakpoint-up(md) {
  .acms-entry-form-action-group-revision {
    width: auto;

    > * {
      flex-basis: auto;
    }
  }
}

// ドラッグ&ドロップ時
.drag-n-drop-hover {
  &.acms-media {
    background: global.$acms-color-white;
  }

  .acms-drop-inside {
    border-color: global.$acms-color-info70;
  }

  .acms-icon-media {
    color: global.$acms-color-info70;
  }

  .acms-media-dropText {
    color: global.$acms-color-info70;
  }
}
