/* components/atoms/caret.css — átomo Caret (A15).
 *
 * Chevron puro em CSS via borders. O tamanho é controlado pela var
 * --cmp-caret-size (setada inline pelo componente).
 */

.cmp-caret {
  --cmp-caret-size: 6px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  vertical-align: middle;
  transition: transform 0.15s ease;
  color: inherit;
}

.cmp-caret--down {
  border-width: var(--cmp-caret-size) var(--cmp-caret-size) 0 var(--cmp-caret-size);
  border-color: currentColor transparent transparent transparent;
}

.cmp-caret--up {
  border-width: 0 var(--cmp-caret-size) var(--cmp-caret-size) var(--cmp-caret-size);
  border-color: transparent transparent currentColor transparent;
}

.cmp-caret--right {
  border-width: var(--cmp-caret-size) 0 var(--cmp-caret-size) var(--cmp-caret-size);
  border-color: transparent transparent transparent currentColor;
}

.cmp-caret--left {
  border-width: var(--cmp-caret-size) var(--cmp-caret-size) var(--cmp-caret-size) 0;
  border-color: transparent currentColor transparent transparent;
}