/* default */
:host {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--color-tag-text);
  border-radius: 100px;
  border: solid 1px var(--color-tag-border);
  font-weight: 600;
  font-size: 13px;
  padding: 3px 7px;
}
:host.solid {
  color: var(--color-tag-solid-text);
  background-color: var(--color-tag-bg);
}
:host.readable {
  color: var(--color-tag-readable-text);
  background-color: var(--color-tag-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.primary) {
  color: var(--color-tag-primary-text);
  border: solid 1px var(--color-tag-primary-border);
}
:host(.primary).solid {
  color: var(--color-tag-primary-solid-text);
  background-color: var(--color-tag-primary-bg);
}
:host(.primary).readable {
  color: var(--color-tag-primary-readable-text);
  background-color: var(--color-tag-primary-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.success) {
  color: var(--color-tag-success-text);
  border: solid 1px var(--color-tag-success-border);
}
:host(.success).solid {
  color: var(--color-tag-success-solid-text);
  background-color: var(--color-tag-success-bg);
}
:host(.success).readable {
  color: var(--color-tag-success-readable-text);
  background-color: var(--color-tag-success-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.danger) {
  color: var(--color-tag-danger-text);
  border: solid 1px var(--color-tag-danger-border);
}
:host(.danger).solid {
  color: var(--color-tag-danger-solid-text);
  background-color: var(--color-tag-danger-bg);
}
:host(.danger).readable {
  color: var(--color-tag-danger-readable-text);
  background-color: var(--color-tag-danger-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.warning) {
  color: var(--color-tag-warning-text);
  border: solid 1px var(--color-tag-warning-border);
}
:host(.warning).solid {
  color: var(--color-tag-warning-solid-text);
  background-color: var(--color-tag-warning-bg);
}
:host(.warning).readable {
  color: var(--color-tag-warning-readable-text);
  background-color: var(--color-tag-warning-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.armed) {
  color: var(--color-tag-armed-text);
  border: solid 1px var(--color-tag-armed-border);
}
:host(.armed).solid {
  color: var(--color-tag-armed-solid-text);
  background-color: var(--color-tag-armed-bg);
}
:host(.armed).readable {
  color: var(--color-tag-armed-readable-text);
  background-color: var(--color-tag-armed-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.disarmed) {
  color: var(--color-tag-disarmed-text);
  border: solid 1px var(--color-tag-disarmed-border);
}
:host(.disarmed).solid {
  color: var(--color-tag-disarmed-solid-text);
  background-color: var(--color-tag-disarmed-bg);
}
:host(.disarmed).readable {
  color: var(--color-tag-disarmed-readable-text);
  background-color: var(--color-tag-disarmed-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.partially-armed) {
  color: var(--color-tag-partially-armed-text);
  border: solid 1px var(--color-tag-partially-armed-border);
}
:host(.partially-armed).solid {
  color: var(--color-tag-partially-armed-solid-text);
  background-color: var(--color-tag-partially-armed-bg);
}
:host(.partially-armed).readable {
  color: var(--color-tag-partially-armed-readable-text);
  background-color: var(--color-tag-partially-armed-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.alarm) {
  color: var(--color-tag-alarm-text);
  border: solid 1px var(--color-tag-alarm-border);
}
:host(.alarm).solid {
  color: var(--color-tag-alarm-solid-text);
  background-color: var(--color-tag-alarm-bg);
}
:host(.alarm).readable {
  color: var(--color-tag-alarm-readable-text);
  background-color: var(--color-tag-alarm-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.playback) {
  color: var(--color-tag-playback-text);
  border: solid 1px var(--color-tag-playback-border);
}
:host(.playback).solid {
  color: var(--color-tag-playback-solid-text);
  background-color: var(--color-tag-playback-bg);
}
:host(.playback).readable {
  color: var(--color-tag-playback-readable-text);
  background-color: var(--color-tag-playback-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.restore) {
  color: var(--color-tag-restore-text);
  border: solid 1px var(--color-tag-restore-border);
}
:host(.restore).solid {
  color: var(--color-tag-restore-solid-text);
  background-color: var(--color-tag-restore-bg);
}
:host(.restore).readable {
  color: var(--color-tag-restore-readable-text);
  background-color: var(--color-tag-restore-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.verification) {
  color: var(--color-tag-verification-text);
  border: solid 1px var(--color-tag-verification-border);
}
:host(.verification).solid {
  color: var(--color-tag-verification-solid-text);
  background-color: var(--color-tag-verification-bg);
}
:host(.verification).readable {
  color: var(--color-tag-verification-readable-text);
  background-color: var(--color-tag-verification-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.relay) {
  color: var(--color-tag-relay-text);
  border: solid 1px var(--color-tag-relay-border);
}
:host(.relay).solid {
  color: var(--color-tag-relay-solid-text);
  background-color: var(--color-tag-relay-bg);
}
:host(.relay).readable {
  color: var(--color-tag-relay-readable-text);
  background-color: var(--color-tag-relay-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.note) {
  color: var(--color-tag-note-text);
  border: solid 1px var(--color-tag-note-border);
}
:host(.note).solid {
  color: var(--color-tag-note-solid-text);
  background-color: var(--color-tag-note-bg);
}
:host(.note).readable {
  color: var(--color-tag-note-readable-text);
  background-color: var(--color-tag-note-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

:host(.ai) {
  color: var(--color-tag-ai-text);
  border: solid 1px var(--color-tag-ai-border);
}
:host(.ai).solid {
  color: var(--color-tag-ai-solid-text);
  background-color: var(--color-tag-ai-bg);
}
:host(.ai).readable {
  color: var(--color-tag-ai-readable-text);
  background-color: var(--color-tag-ai-readable-bg);
  border-radius: 5px;
  border: solid 1px transparent;
  font-weight: 500;
}

/* size */
:host(.small) {
  font-size: 11px;
  padding: 3px 6px;
}

:host(.large) {
  font-size: 14px;
  padding: 4px 8px;
}