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

/* ------------------------------
 クイック検索
------------------------------- */
.acms-modal-quick-search {
  font-size: 13px;

  .acms-form textarea {
    width: 100%;
    height: 50%;
    margin: 0;
    font-family: Consolas, 'Courier New', Courier, monospace;
    font-size: 1.3em;
    color: global.$acms-color-black-dark;
  }

  .acms-admin-title3 {
    padding: 5px 10px;
    margin: 0 0 10px;
    font-size: 14px;
    color: global.$acms-color-black-dark;
    background: global.$acms-color-white;
  }

  .acms-table-admin {
    margin: -10px 0 20px;
    border-spacing: 0;
    border-collapse: collapse;

    td {
      display: table-cell;
      padding: 8px 5px;
      line-height: 1.3;
      background-color: global.$acms-color-white;
      border: none;
      transition: auto;
    }
  }

  .acms-label {
    margin-right: 5px;
    font-size: 11px;
    font-weight: bold;
    color: global.$acms-color-white;
    background-color: global.$acms-color-info70;
  }

  .acms-quick-search-title-btn {
    display: block;
    width: 100%;
    padding: 0;
    text-align: left;
    background: none;
    border: none;
  }

  .acms-quick-search-main-title {
    display: block;
    font-weight: bold;
    color: global.$acms-color-black-dark;
    text-decoration: none;

    &:visited {
      color: global.$acms-color-black-dark;
    }
  }

  .acms-quick-search-sub-title {
    display: block;
    color: #5e6c84;

    span {
      font-size: 12px;
      color: global.$acms-color-gray90;
    }
  }

  // 行の hover 状態は .acms-table-hover の既存規約 (tr.hover) に乗る。ここではその状態時の
  // タイトル・ラベル色だけ .acms-table-hover の既定から上書きする。
  .hover {
    .acms-label {
      color: global.$acms-color-info70 !important;
      background-color: global.$acms-color-white;
    }

    .acms-quick-search-main-title {
      color: global.$acms-color-black-dark;
    }

    .acms-quick-search-sub-title {
      color: #5e6c84;

      span {
        color: global.$acms-color-gray90;
      }
    }
  }

  .acms-modal-footer {
    padding: 10px 0 0;
    margin: 0 -5px;
    border-top: 1px solid global.$acms-color-gray60;
  }

  .acms-list-inline {
    margin: 5px 0;
    font-size: 12px;
    color: global.$acms-color-gray90;
    text-align: right;

    li {
      padding-right: 9px;
      font-size: 12px !important;

      kbd {
        padding: 0 5px;
        font-weight: bold;
        background: global.$acms-color-system-gray20;
        border-radius: 2px;
      }
    }
  }

  .acms-quick-search-initial-mark {
    position: relative;
    width: 30px;
    height: 30px;
    margin-right: 5px;
    margin-left: 5px;
    text-align: center;
    background-color: global.$acms-color-gray70;
    border-radius: 50px;

    &::after {
      display: inline-block;
      margin-top: 4px;
      margin-left: 1px;
      font-size: 17px;
      color: global.$acms-color-white;
      content: '';
    }
  }

  .acms-quick-search-initial-b {
    background-color: #d2b8b8;

    &::after {
      content: 'B';
    }
  }

  .acms-quick-search-initial-c {
    background-color: #b8d2b8;

    &::after {
      content: 'C';
    }
  }

  .acms-quick-search-initial-e {
    background-color: #b8ccd2;

    &::after {
      content: 'E';
    }
  }

  .acms-quick-search-initial-m {
    background-color: #c4b8d2;

    &::after {
      content: 'M';
    }
  }

  .acms-quick-search-initial-m2 {
    background-color: #9fbf91;

    &::after {
      content: 'M';
    }
  }

  .acms-quick-search-initial-v {
    background-color: #b8d2c9;

    &::after {
      content: 'V';
    }
  }

  .acms-quick-search-initial-s {
    background-color: #b6c1da;

    &::after {
      content: 'S';
    }
  }

  .acms-quick-search-initial-g {
    background-color: #adadad;

    &::after {
      content: 'G';
    }
  }

  .acms-quick-search-initial-v2 {
    background-color: #b8d2c9;

    &::after {
      content: 'V2';
    }
  }
}

/* ------------------------------
 変数一覧テーブル
 acms-code/all.json 経由で取得する事前生成 HTML (generated/acms-code/vars/*.html) を
 dangerouslySetInnerHTML で挿入する。クラス名 (loop / veil / deprecated / textLong /
 textTooLong 等) は生成側の命名規約に合わせているため、ここでは acms- 接頭辞を付けない。
------------------------------- */
.acms-quick-search-variable-table {
  height: 100%;
  font-family: Consolas, 'Courier New', Courier, monospace;

  h1 {
    padding: 1em;
  }

  fieldset {
    margin: 1em;
    background-color: lightyellow;
    border: 2px solid gold;

    &.loop {
      background-color: snow;
      border: 3px solid firebrick;
    }

    &.veil {
      background-color: whitesmoke;
      border: 2px dashed royalblue;
    }
  }

  legend {
    padding: 0.3em;
    font-size: x-large;
    font-weight: bold;
    background-color: lightyellow;
    border: 2px solid gold;

    &.loop {
      background-color: snow;
      border: 3px solid firebrick;
    }

    &.veil {
      background-color: whitesmoke;
      border: 2px dashed royalblue;
    }

    span {
      margin-left: 20px;
      font-size: 14px;
      color: #777;
    }
  }

  var {
    display: block;
    padding: 0.5em;
    margin: 0.5em;
    font-size: large;
    font-style: normal;
    font-weight: bold;
    background-color: global.$acms-color-white;
    border: 3px double global.$acms-color-black-dark;

    &.deprecated {
      color: global.$acms-color-gray80;

      &::after {
        // stylelint-disable-next-line no-irregular-whitespace
        content: '　※廃止予定';
      }
    }

    span {
      float: right;
      font-size: 14px;
      color: #777;
    }
  }

  // stylelint-disable selector-class-pattern -- 生成 HTML 側の命名規約 (camelCase) に合わせる
  .textLong {
    width: 420px;
  }

  .textTooLong {
    width: 520px;
  }
  // stylelint-enable selector-class-pattern
}
