/* My Work — Control Icons */

:root {
  --mw-icon-chevron-up: url('/icons/Chevron_Up.svg');
  --mw-icon-chevron-down: url('/icons/Chevron_Down.svg');
  --mw-icon-caret-down: url('/icons/Caret_Down_SM.svg');

  --mw-control-icon-size: 16px;
}

/* Единая основа */

.mw-control-icon {
  display: inline-block;
  width: var(--mw-control-icon-size);
  height: var(--mw-control-icon-size);
  flex: 0 0 var(--mw-control-icon-size);
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  pointer-events: none;
}

/* Переключатели */

.mw-control-icon--up {
  mask-image: var(--mw-icon-chevron-up);
  -webkit-mask-image: var(--mw-icon-chevron-up);
}

.mw-control-icon--down {
  mask-image: var(--mw-icon-chevron-down);
  -webkit-mask-image: var(--mw-icon-chevron-down);
}

/* Выпадающие списки */
.mw-control-icon--select {
  mask-image: var(--mw-icon-caret-down);
  -webkit-mask-image: var(--mw-icon-caret-down);
}

/* Standard select indicators */

.mw-select-picker .mw-picker-chevron .mw-control-icon,
.mw-range-picker .mw-picker-chevron .mw-control-icon {
  --mw-control-icon-size: 16px;
}

.mw-picker-trigger[aria-expanded='true'] .mw-control-icon--select {
  transform: rotate(180deg);
}

.mw-control-icon--select {
  transition: transform 180ms ease;
}

/* Standard time steppers */

.mw-time-step .mw-control-icon {
  --mw-control-icon-size: 12px;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  .mw-control-icon--select {
    transition: none;
  }
}

/* Standard dropdown icon sizing */

.mw-select-picker .mw-control-icon--select {
  --mw-control-icon-size: 20px;
}

.mw-select-picker .mw-picker-chevron {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted);
}

/* Date range dropdown */

.mw-range-picker .mw-picker-chevron {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  color: var(--muted);
}

.mw-range-picker .mw-control-icon--select {
  --mw-control-icon-size: 20px;
}

.mw-range-picker .mw-picker-trigger[aria-expanded='true'] .mw-control-icon--select {
  transform: rotate(180deg);
}