@import '../../styles/common';

.Icon {
  display: block;
  height: 20px;
  width: 20px;
  max-height: 100%;
  max-width: 100%;
  margin: auto;
}

.applyColor {
  color: var(--p-surface);
}

.hasBackdrop {
  position: relative;
  display: flex;
  align-items: center;
  margin: var(--p-space-1);

  &::before {
    content: '';
    position: absolute;
    top: calc(-1 * var(--p-space-1));
    bottom: calc(-1 * var(--p-space-1));
    left: calc(-1 * var(--p-space-1));
    right: calc(-1 * var(--p-space-1));
    border-radius: var(--p-border-radius-half);
  }
}

.colorBase {
  @include recolor-icon(var(--p-icon));

  &::before {
    background-color: var(--p-surface-neutral);
  }
}

.colorSubdued {
  @include recolor-icon(var(--p-icon-subdued));
}

.colorCritical {
  @include recolor-icon(var(--p-icon-critical));

  &::before {
    background-color: var(--p-surface-critical);
  }
}

.colorInteractive {
  @include recolor-icon(var(--p-interactive));
}

.colorWarning {
  @include recolor-icon(var(--p-icon-warning));

  &::before {
    background-color: var(--p-surface-warning);
  }
}

.colorHighlight {
  @include recolor-icon(var(--p-icon-highlight));

  &::before {
    background-color: var(--p-surface-highlight);
  }
}

.colorSuccess {
  @include recolor-icon(var(--p-icon-success));

  &::before {
    background-color: var(--p-surface-success);
  }
}

.colorPrimary {
  @include recolor-icon(var(--p-action-primary));
}

.Svg,
.Img {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
}

.Placeholder {
  padding-bottom: 100%;
  background: currentColor;
}