@use "../../foundations/helpers/forward.helpers.scss" as *;
@use "../icon-sprite/icon-sprite.scss";

$ds-pictogram__size: 40px;
$ds-pictogram__size--large: 64px;
$ds-pictogram__icon-size: 24px;
$ds-pictogram__icon-size--large: 40px;

.ds-pictogram {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: $ds-color-brand-100;
  height: ds-px-to-rem($ds-pictogram__size);
  width: ds-px-to-rem($ds-pictogram__size);
  @at-root .ds-force-px#{&} {
    height: $ds-pictogram__size;
    width: $ds-pictogram__size;
  }

  .ds-icon {
    display: flex;
    height: ds-px-to-rem($ds-pictogram__icon-size);
    width: ds-px-to-rem($ds-pictogram__icon-size);
    @at-root .ds-force-px#{&} {
      height: $ds-pictogram__icon-size;
      width: $ds-pictogram__icon-size;
    }

    > svg {
      fill: $ds-color-neutral-black;
    }
  }

  &.ds-pictogram--business {
    background-color: $ds-color-green-100;
  }

  &.ds-pictogram--game {
    background-color: $ds-color-culture-200;
  }

  &.ds-pictogram--large {
    height: ds-px-to-rem($ds-pictogram__size--large);
    width: ds-px-to-rem($ds-pictogram__size--large);
    @at-root .ds-force-px#{&} {
      height: $ds-pictogram__size--large;
      width: $ds-pictogram__size--large;
    }

    .ds-icon {
      height: ds-px-to-rem($ds-pictogram__icon-size--large);
      width: ds-px-to-rem($ds-pictogram__icon-size--large);
      @at-root .ds-force-px#{&} {
        height: $ds-pictogram__icon-size--large;
        width: $ds-pictogram__icon-size--large;
      }
    }
  }
}