@import '../settings/variables';

.c-circle-icon {
  $size: 1em;
  display: inline-block;
  position: relative;

  border-radius: 50%;
  padding: $size / 2;
  width: $size * 2;
  height: $size * 2;

  &--no-background {
    background-color: transparent;

    .c-circle-icon__icon {
      color: $color-secondary-dark;
    }
  }

  &--small {
    padding: 0;
    width: 0.875em;
    height: 0.875em;
  }

  &__icon {
    color: $color-background;
    font-size: $size;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    &--large {
      font-size: 1.5em;
    }

    &--small {
      font-size: 0.875em;
    }
  }

  &--large {
    padding: $size;
    width: $size * 4;
    height: $size * 4;
  }

  &--clickable {
    cursor: pointer;
  }

  @media print {
    display: none;
  }
}