/**
 * ECL Icons base styles
 */

:root {
  --ecl-icon-size-small: 1rem;
  --ecl-icon-size-medium: 1.25rem;
  --ecl-icon-size-medium-large: clamp(1.375rem, 1.2rem + 0.875vw, 1.5rem);
  --ecl-icon-size-large: 1.5rem;
  --ecl-icon-size-extra-large: 2rem;
  --ecl-icon-size-2-extra-large: 2.5rem;
}

.ecl-icon {
  display: inline-block;
  fill: currentColor;
  vertical-align: middle;
  max-height: 65px;
}

.ecl-icon--small {
  width: var(--ecl-icon-size-small);
  height: var(--ecl-icon-size-small);
}

.ecl-icon--medium {
  width: var(--ecl-icon-size-medium);
  height: var(--ecl-icon-size-medium);
}

.ecl-icon--medium-large {
  width: var(--ecl-icon-size-medium-large);
  height: var(--ecl-icon-size-medium-large);
}

.ecl-icon--large {
  width: var(--ecl-icon-size-large);
  height: var(--ecl-icon-size-large);
}

.ecl-icon--extra-large {
  width: var(--ecl-icon-size-extra-large);
  height: var(--ecl-icon-size-extra-large);
}

.ecl-icon--2-extra-large {
  width: var(--ecl-icon-size-2-extra-large);
  height: var(--ecl-icon-size-2-extra-large);
}

.ecl-icon__label {
  margin-left: 0.5rem;
  font-size: 0.875rem;
}