/* Палитра цветов бренда: плашки с кнопками «скопировать».
   Цвет плашки задаётся инлайн-переменной --color. Работает в паре с /js/copy.js.

   <div class="ids__color-palette">
     <div class="ids__color-plate [big] [wide] [main]">   (палитра с .four — плашки по 25%, с .three — по трети)
       <div class="ids__color-sample [light]" style="--color: rgb(255, 78, 0)">
         <div class="ids__color-sample-text">
           <p>Orange</p>
           <button class="ids__copy" data-copy="RGB 255, 78, 0">RGB 255, 78, 0</button>
           <span class="ids__copy-hint">Copy colour</span>
           <span class="ids__copy-done">Colour copied</span>
         </div>
       </div>
     </div>
   </div> */

.ids .ids__color-palette {
  display: flex;
  flex-wrap: wrap;
  /* После палитры всегда спейс S, и перед текстом, и перед заголовком.
     Поле заголовка и иллюстрационный воздух его не увеличивают — media.css. */
  margin-bottom: var(--ids__spacer-s);

  /* .big + несколько .wide: три колонки, белый не выпадает на свою строку */
  &:has(> .ids__color-plate.big) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    @media (width < 768px) {
      grid-template-columns: 1fr;
    }
  }

  /* Четыре плашки в ряд на всю ширину колонки (палитры позиционирования,
     акцентные цвета); пятая и дальше переносятся на следующий ряд,
     на мобильных — по две */
  &.four .ids__color-plate {
    width: 25%;

    @media (width < 768px) {
      width: 50%;
    }
  }

  /* Три невысокие плашки в ряд на всю ширину колонки: оттенки под
     основным цветом (.main) или фоны под тремя карточками */
  &.three .ids__color-plate:not(.main) {
    width: calc(100% / 3);

    & .ids__color-sample {
      aspect-ratio: auto;
      height: 6em;

      @media (width < 768px) {
        height: 5em;
      }
    }
  }
}

.ids .ids__color-plate {
  position: relative;
  width: 8.7em;
  overflow: hidden;

  @media (width < 768px) {
    width: 6.3em;
  }

  /* Основная палитра (.big + .wide) — сетка из трёх колонок, как на
     старом гайде: оранжевый на две колонки, остальные по одной.
     Квадрат у .wide и 2:1 у .big задаются ниже, на образце. */
  &.big,
  &.wide {
    width: auto;
    min-width: 0;
    max-width: none;
  }

  &.big {
    grid-column: span 2;

    @media (width < 768px) {
      grid-column: auto;
      width: 100%;
    }
  }

  &.wide {
    @media (width < 768px) {
      width: 100%;
    }
  }

  &.main {
    width: 100%;
  }

  &.half {
    width: 50%;
  }
}

.ids .ids__color-sample {
  position: relative;
  aspect-ratio: 1;
  background-color: var(--color);
  color: var(--ids__color-white);

  &.light {
    color: var(--ids__text);
  }

  /* Чистый белый на белой странице. Та же внутренняя рамка,
     что у .color-sample-area.white на старом сайте. */
  &[style*="255, 255, 255"],
  &[style*="#FFFFFF"],
  &[style*="#ffffff"] {
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
  }

  /* .wide — квадрат, .big — вдвое шире и той же высоты (старый гайд:
     width 13.8em и padding-bottom 100% / 50%). */
  .ids__color-plate.wide & {
    aspect-ratio: 1;
    height: auto;
  }

  .ids__color-plate.big & {
    aspect-ratio: 2 / 1;
    height: auto;
  }

  @media (width < 768px) {
    .ids__color-plate.big &,
    .ids__color-plate.wide & {
      aspect-ratio: auto;
      height: 10em;
    }
  }

  .ids__color-plate.main & {
    aspect-ratio: auto;
    height: 6em;
  }
}

.ids .ids__color-sample-text {
  position: absolute;
  inset: 0.4em 1em 0.4em 0.4em;
  display: flex;
  flex-direction: column;

  & p {
    font-size: 0.6em;
    margin: 0 0 0.3em;
    color: inherit;
  }
}

/* Кнопка копирования — в плашке белая рамка */
.ids .ids__copy {
  appearance: none;
  background: none;
  font: inherit;
  font-size: 0.6em;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.3em;
  border: 2px solid color-mix(in srgb, currentColor 20%, transparent);
  border-radius: 0.3em;
  padding: 0.2em 0.3em;
  color: inherit;
  cursor: pointer;

  &:hover {
    border-color: color-mix(in srgb, currentColor 80%, transparent);
  }

  @media (width < 768px) {
    font-size: 0.46em;
  }
}

.ids .ids__copy-hint,
.ids .ids__copy-done {
  position: absolute;
  bottom: 0;
  font-size: 0.6em;
  opacity: 0;
  transition: opacity 0.2s ease;

  &.visible {
    opacity: 1;
  }
}

/* Набор иконок: клик копирует SVG-код файла.

   <div class="ids__icon-set">
     <button class="ids__icon-copy"><img src="/images/…/s_heart.svg" alt="heart">
       <span class="ids__copy-hint">Copy SVG</span><span class="ids__copy-done">Copied SVG</span>
     </button>
   </div> */

.ids .ids__icon-set {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.5em, 1fr));
  gap: 0.6em;
  margin-bottom: calc(var(--ids__density) * 0.6em);
}

.ids .ids__icon-copy {
  appearance: none;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8em 0.6em 1.2em;
  border-radius: 0.5em;
  cursor: pointer;
  transition: background var(--ids__duration-base);

  &:hover {
    background: color-mix(in srgb, var(--ids__text) 5%, transparent);
    transition: background 0s;
  }

  & img {
    width: 2.5em;
    height: 2.5em;
    display: block;
  }

  & .ids__copy-hint,
  & .ids__copy-done {
    bottom: 0.2em;
    transition: opacity 0s;
  }
}