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

/* ------------------------------
 ユニットグループ
------------------------------- */

/* ------------------------------
 フロート解除
------------------------------ */
// フロート解除(不可視)(予備)
.clearHidden {
  display: block;
  height: 0;
  margin: 0;
  clear: both;
  visibility: hidden;
  border: none;
}

/* ------------------------------
 エントリー内 主な要素
------------------------------ */
$text-unit-tags: 'h2', 'h3', 'h4', 'h5', 'h6', 'dl', 'p' !default;
$unit-type: 'image', 'file', 'map', 'yolp', 'street-view', 'youtube', 'video', 'eximage', 'media', 'quote', 'module';
$align: 'left', 'right', 'center', 'auto' !default;
$unit-gutter: 20px !default;
$_unit-margin-bottom: $unit-gutter !default;
$_hightlight-colors: #ff6, #a0ffff, #9f9, #f99, #f6f, #800 !default;

.#{global.$entry-class} {
  [class*='#{global.$grid-column-name}'] {
    padding: 0;
  }
}

/* ------------------------------
 テキストユニットの設定
------------------------------ */
.#{global.$entry-class} {
  @each $text-unit in $text-unit-tags {
    #{$text-unit} {
      margin-right: math.div($unit-gutter, 2);
      margin-left: math.div($unit-gutter, 2);
    }
  }

  blockquote {
    padding: 10px 20px;
    margin: 0 0 $unit-gutter;
    border-left: solid 5px global.$acms-color-gray60;
  }
}

/* ------------------------------
各種ユニットの設定
------------------------------ */

@each $unit in $unit-type {
  .#{global.$entry-class} [class*='column-#{$unit}'] {
    @if $unit == 'map' {
      border-right: math.div($unit-gutter, 2) solid transparent;
      border-left: math.div($unit-gutter, 2) solid transparent;
      box-sizing: border-box; // stylelint-disable-line order/properties-order
    } @else if $unit == 'quote' {
      margin-right: math.div($unit-gutter, 2);
      margin-left: math.div($unit-gutter, 2);
    } @else if $unit == 'street-view' {
      &:not(.column-street-view-inner) {
        padding-right: math.div($unit-gutter, 2);
        padding-left: math.div($unit-gutter, 2);
      }
    } @else {
      padding-left: math.div($unit-gutter, 2);
      padding-right: math.div($unit-gutter, 2); // stylelint-disable-line order/properties-order
      box-sizing: border-box; // stylelint-disable-line order/properties-order
    }
  }
}

@each $unit in $unit-type {
  [class*='column-#{$unit}'] {
    margin-bottom: $_unit-margin-bottom;
  }
}

/* 画像・メディア・画像URLの共通設定 */
[class*='column-image'],
[class*='column-media'],
[class*='column-eximage'] {
  display: block;

  &.caption {
    margin-bottom: math.div($-unit-margin-bottom, 2);
  }

  a {
    display: block;
  }

  & img {
    max-width: 100%;
    height: auto;
    vertical-align: top;
  }

  .caption {
    margin: 5px 0 0;
  }
}

/* 画像ユニットの設定 */
[class*='column-image'] {
  &[style*='width'] {
    max-width: 100%;
  }
}

/* メディアの種類がファイルだった時の設定 */
[class*='column-media'] {
  a[href*='media-download'] {
    display: inline-block;
    width: 100%;
  }
}

/* 地図・Yahooo!地図の共通設定 */
[class*='column-map'],
[class*='column-yolp'] {
  > img {
    max-width: 100%;
  }

  // 地図ユニットのアイコンの調整
  img {
    width: auto;
    height: auto;
  }
}

[class*='column-map'] {
  > div {
    max-width: 100%;
  }
}

[class*='column-yolp'] {
  width: auto !important;
}

[class*='column-quote'] {
  blockquote {
    padding: 20px 10px 20px 20px;
  }

  /* 引用ユニット画像 */
  .quoteImageContainer {
    position: relative;
    float: left;
    max-width: 154px;
    margin-right: 25px;
  }

  .quoteImage {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* 引用ユニットテキスト */
  .quoteTitle {
    padding: 0;
    margin: 0 0 5px;
    line-height: 1.4;

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

  .quoteTitleLink {
    color: global.$acms-color-link-text;
  }

  .quoteSiteName {
    padding: 0;
    margin: 0 0 10px;
    color: global.$acms-color-gray90;

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

  .quoteDescription {
    padding: 0;
    margin: 0;
    line-height: 1.6;
    color: global.$acms-color-black;

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

@each $unit in $unit-type {
  /* 配置のスタイル */
  @each $align-name in $align {
    .column-#{$unit}-#{$align-name} {
      @if $unit == 'file' {
        text-align: #{$align-name};

        & + .caption {
          text-align: #{$align-name};
        }
      } @else if $unit == 'media' {
        :not([href*='media-download'], [href*='storage']) + .caption {
          /* 画像のキャプションを中央寄せにする記述(media-downloadは動的、storageは静的書き出しに対応しています) */
          text-align: center;
        }
      }

      @if $align-name == left {
        & {
          float: left;
          text-align: left;
        }
      }

      @if $align-name == right {
        & {
          float: right;
          text-align: right;
        }
      }

      @if $align-name == center {
        & {
          display: block;
          float: none;
          margin-right: auto;
          margin-left: auto;
          text-align: center;
        }
      }

      @if $align-name == auto {
        & {
          float: none;
        }
      }
    }
  }
}

/* .acms-entry-unit-fullの設定 */
@each $unit in $unit-type {
  @if $unit == 'youtube' or $unit == 'video' {
    .acms-entry-unit-full:not(.acms-unit-size-inherit) [class*='column-#{$unit}'] {
      width: 100% !important;
    }
  } @else {
    .acms-entry-unit-full:not(.acms-unit-size-inherit) [class*='column-#{$unit}'] {
      width: auto !important;
      max-width: 100%;
    }
  }
}

// acms-col-クラスで表示サイズが指定されているときは
// 配置が右の時の要素の回り込みを防ぐ
@media (max-width: global.$breakpoint-sm-min) {
  [class*='acms-col-'][class*='-right'] {
    float: left;
  }

  [class*='acms-col-'][class*='-right'] + * {
    clear: both;
  }
}

/* ------------------------------
 共通の要素
------------------------------ */
.entry-container {
  margin-right: math.div($unit-gutter, 2);
  margin-left: math.div($unit-gutter, 2);
}

/* PDFプレビュー */
.column-pdf-image {
  width: 100%;
  border: solid 1px global.$acms-color-gray70;
}

/* ストリートビュー */
.column-inner-street-view {
  width: 100%;
  padding-bottom: 100%;
}

/* YouTube動画をレスポンシブ対応させるための記述 */
.column-iframe {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding-bottom: math.div(9, 16) * 100%;
  overflow: hidden;

  iframe,
  object,
  embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* ------------------------------
 検索
------------------------------ */

/* 検索結果のハイライト
------------------------------ */
@each $hightlight-color in $_hightlight-colors {
  $index: index($_hightlight-colors, $hightlight-color);

  .highlight#{$index} {
    background-color: $hightlight-color;
  }
}
