@use "styles/IconSizes.module.scss";

.tiny {
  min-width: IconSizes.$tiny;
  min-height: IconSizes.$tiny;
  max-width: IconSizes.$tiny;
  max-height: IconSizes.$tiny;
}

.small {
  min-width: IconSizes.$small;
  min-height: IconSizes.$small;
  max-width: IconSizes.$small;
  max-height: IconSizes.$small;
}

.normal {
  min-width: IconSizes.$normal;
  min-height: IconSizes.$normal;
  max-width: IconSizes.$normal;
  max-height: IconSizes.$normal;
}

.large {
  min-width: IconSizes.$large;
  min-height: IconSizes.$large;
  max-width: IconSizes.$large;
  max-height: IconSizes.$large;
}

.big {
  min-width: IconSizes.$big;
  min-height: IconSizes.$big;
  max-width: IconSizes.$big;
  max-height: IconSizes.$big;
}

.black {
  color: var(--icon-3);

  &.hovered {
    color: var(--primary-0);
  }
}

.dark-grey {
  color: var(--icon-2);
}

.grey {
  color: var(--icon-1);
}

.primary {
  color: var(--primary-0);
}

.accent {
  color: var(--accent);
}

.gold {
  color: var(--gold);
}

.white {
  color: var(--icon-0);
}

.dangerous {
  color: var(--dangerous);

  &.hovered {
    color: var(--dangerous-dark);
  }
}

.warning {
  color: var(--warning);
}

.success {
  color: var(--success);
}

.disabled {
  color: var(--icon-3);
  pointer-events: none;
  opacity: 0.2;
}

.hovered {
  cursor: pointer;
}