@import "../settings/variables";

.icon {
  display: inline-flex;
  flex-shrink: 0;

  &--clickable {
    cursor: pointer;
  }

  &--hover-fill {
    transition: color 0.2s ease-in-out;

    &:hover {
      color: $icon-hover-fill-color;
      path {
        fill: $icon-hover-fill-color;
      }
    }
  }

  &--hover-circle:hover {
    color: $icon-hover-circle-color;

    background-color: $icon-hover-circle-bgcolor;
    border-radius: 50%;

    path {
      fill: $icon-hover-circle-color;
    }
  }

  &--sm {
    font-size: 16px;
    min-width: 16px;
  }

  &--md {
    font-size: 24px;
    min-width: 24px;
  }

  &--lg {
    font-size: 26px;
    min-width: 26px;
  }

  svg {
    pointer-events: none;
  }
}