.input-xxl {
  height: var(--input-xxl-height);
  font-size: var(--input-xxl-font-size);
}

.input-xl {
  height: var(--input-xl-height);
  font-size: var(--input-xl-font-size);
}

.input-l {
  height: var(--input-l-height);
  font-size: var(--input-l-font-size);
}

.input-s {
  height: var(--input-s-height);
  font-size: var(--input-s-font-size);
}

.input-xs {
  height: var(--input-xs-height);
  font-size: var(--input-xs-font-size);
}

.input-xxs {
  height: var(--input-xxs-height);
  font-size: var(--input-xxs-font-size);
}

input[type='color'] {
  &.input-xxl {
    width: var(--input-xxl-height);
  }

  &.input-xl {
    width: var(--input-xl-height);
  }

  &.input-l {
    width: var(--input-l-height);
  }

  &.input-s {
    width: var(--input-s-height);
  }

  &.input-xs {
    width: var(--input-xs-height);
  }

  &.input-xxs {
    width: var(--input-xxs-height);
  }
}