:host {
  box-sizing: border-box;
  display: block;
  contain: layout;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

:host([hidden]) {
  display: none !important;
}

:host {
  --color: var(--bp-text-color-500, #363c49);
  --width: var(--bp-size-700, 24px);
  --height: var(--bp-size-700, 24px);
  width: var(--width);
  height: var(--height);
  fill: var(--color);
  color: var(--color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  contain: strict;
  cursor: inherit;
}

svg {
  display: block;
  width: 100%;
}

:host([size*='sm']) {
  --width: calc(var(--bp-size-600, 16px) + var(--bp-size-300, 4px));
  --height: calc(var(--bp-size-600, 16px) + var(--bp-size-300, 4px));
}

:host([size*='md']) {
  --width: var(--bp-size-700, 24px);
  --height: var(--bp-size-700, 24px);
}

:host([size*='lg']) {
  --width: var(--bp-size-800, 32px);
  --height: var(--bp-size-800, 32px);
}

:host([size*='fit']) {
  --height: auto;
  --width: auto;

  contain: layout;
}

:host([status='success']) {
  --color: var(--bp-status-success-background-200, #19864f);
}

:host([status='danger']) {
  --color: var(--bp-status-danger-background-200, #bb1136);
}

:host([status='warning']) {
  --color: var(--bp-status-warning-background-200, #ffa600);
}

:host([status='accent']) {
  --color: var(--bp-status-accent-background-200, #0071eb);
}

:host([inverse]) {
  --color: var(--bp-text-color-200, #fcfcfd);
}

:host([direction='up']) {
  transform: rotate(0deg);
}

:host([direction='down']) {
  transform: rotate(180deg);
}

:host([direction='right']) {
  transform: rotate(90deg);
}

:host([direction='left']) {
  transform: rotate(270deg);
}

.badge,
.alert {
  fill: var(--badge-color, var(--bp-status-danger-background-200, #bb1136));
}

:host([badge='success']) {
  --badge-color: var(--bp-status-success-background-200, #19864f);
}

:host([badge='danger']) {
  --badge-color: var(--bp-status-danger-background-200, #bb1136);
}

:host([badge='warning']) {
  --badge-color: var(--bp-status-warning-background-200, #ffa600);
}

:host([badge='accent']) {
  --badge-color: var(--bp-status-accent-background-200, #0071eb);
}
