:root {
  /* neutral */
  --neutral-hue: 188;
  --neutral-saturation: 10%;
  --neutral-luminosity: 8%;
  --neutral-step-luminosity: 13%;
  /* color */
  --brand-hue: 25;
  --color-saturation: 80%;
  --color-luminosity-1: 20%;
  --color-luminosity-2: 30%;
  --color-luminosity-3: 40%;
  --color-luminosity-4: 60%;
  --color-luminosity-5: 80%;
  /* feedback */
  --feedback-attention-hue: 44;
  --feedback-caution-hue: 24;
  --feedback-warning-hue: 4;
  --feedback-success-hue: 128;
  --feedback-saturation: 80%;
  --feedback-luminosity: 65%;
}

:root {
  /* neutral mutables */
  --neutral-invert: 1;
  --neutral-luminosity-mutable-1: var(--luminosity-fator-1, 0%);
  --neutral-luminosity-mutable-2: var(--luminosity-fator-2, 0%);
  /* color mutables */
  --color-luminosity-mutable-1: var(--luminosity-fator-1, 0%);
  --color-luminosity-mutable-2: var(--luminosity-fator-2, 0%);
  --color-luminosity-mutable-3: var(--luminosity-fator-1, 0%);
}

:root {
  /* neutral tokens */
  --med-color-neutral-1: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-luminosity));
  --med-color-neutral-15: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-step-luminosity));
  --med-color-neutral-2: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-luminosity) + 10% * var(--neutral-invert));
  --med-color-neutral-25: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-step-luminosity) + 10% * var(--neutral-invert));
  --med-color-neutral-3: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-luminosity) + 20% * var(--neutral-invert));
  --med-color-neutral-35: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-step-luminosity) + 20% * var(--neutral-invert));
  --med-color-neutral-4: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-luminosity) + 30% * var(--neutral-invert));
  --med-color-neutral-45: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-step-luminosity) + 30% * var(--neutral-invert));
  --med-color-neutral-5: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-luminosity) + 40% * var(--neutral-invert));
  --med-color-neutral-55: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-1) + var(--neutral-step-luminosity) + 40% * var(--neutral-invert));
  --med-color-neutral-6: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-luminosity) + 50% * var(--neutral-invert));
  --med-color-neutral-65: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-step-luminosity) + 50% * var(--neutral-invert));
  --med-color-neutral-7: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-luminosity) + 60% * var(--neutral-invert));
  --med-color-neutral-75: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-step-luminosity) + 60% * var(--neutral-invert));
  --med-color-neutral-8: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-luminosity) + 70% * var(--neutral-invert));
  --med-color-neutral-85: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-step-luminosity) + 70% * var(--neutral-invert));
  --med-color-neutral-9: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-luminosity) + 80% * var(--neutral-invert));
  --med-color-neutral-95: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-step-luminosity) + 80% * var(--neutral-invert));
  --med-color-neutral-10: calc(var(--neutral-hue) + var(--hue-fator, 0)), calc(var(--neutral-saturation) + var(--saturation-fator, 0%)), calc(var(--neutral-luminosity-mutable-2) + var(--neutral-luminosity) + 90% * var(--neutral-invert));
  /* color tokens */
  --med-color-contrast-fixed: var(--med-color-neutral-10);
  --med-color-brand-1: calc(var(--brand-hue) + var(--hue-fator, 0)), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1) + var(--color-luminosity-1));
  --med-color-brand-2: calc(var(--brand-hue) + var(--hue-fator, 0)), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1) + var(--color-luminosity-2));
  --med-color-brand-3: calc(var(--brand-hue) + var(--hue-fator, 0)), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3) + var(--color-luminosity-3));
  --med-color-brand-4: calc(var(--brand-hue) + var(--hue-fator, 0)), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2) + var(--color-luminosity-4));
  --med-color-brand-5: calc(var(--brand-hue) + var(--hue-fator, 0)), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2) + var(--color-luminosity-5));
  --med-color-brand-gradient: linear-gradient(to right, hsl(var(--med-color-brand-3)), hsl(var(--med-color-brand-1)));
  /* feedback tokens */
  --med-color-fb-attention: var(--feedback-attention-hue), calc(var(--feedback-saturation) + var(--saturation-fator, 0%)), var(--feedback-luminosity);
  --med-color-fb-caution: var(--feedback-caution-hue), calc(var(--feedback-saturation) + var(--saturation-fator, 0%)), var(--feedback-luminosity);
  --med-color-fb-warning: var(--feedback-warning-hue), calc(var(--feedback-saturation) + var(--saturation-fator, 0%)), var(--feedback-luminosity);
  --med-color-fb-success: var(--feedback-success-hue), calc(var(--feedback-saturation) + var(--saturation-fator, 0%)), var(--feedback-luminosity);
}

:root {
  /* base */
  --background: hsl(var(--med-color-neutral-1));
}

ion-content {
  --background: hsl(var(--med-color-neutral-1));
}

.med-color-neutral-1 {
  --med-color-neutral: var(--med-color-neutral-1) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-15 {
  --med-color-neutral: var(--med-color-neutral-15) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-2 {
  --med-color-neutral: var(--med-color-neutral-2) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-25 {
  --med-color-neutral: var(--med-color-neutral-25) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-3 {
  --med-color-neutral: var(--med-color-neutral-3) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-35 {
  --med-color-neutral: var(--med-color-neutral-35) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-4 {
  --med-color-neutral: var(--med-color-neutral-4) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-45 {
  --med-color-neutral: var(--med-color-neutral-45) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-5 {
  --med-color-neutral: var(--med-color-neutral-5) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-55 {
  --med-color-neutral: var(--med-color-neutral-55) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-10) !important;
}

.med-color-neutral-6 {
  --med-color-neutral: var(--med-color-neutral-6) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-65 {
  --med-color-neutral: var(--med-color-neutral-65) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-7 {
  --med-color-neutral: var(--med-color-neutral-7) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-75 {
  --med-color-neutral: var(--med-color-neutral-75) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-8 {
  --med-color-neutral: var(--med-color-neutral-8) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-85 {
  --med-color-neutral: var(--med-color-neutral-85) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-9 {
  --med-color-neutral: var(--med-color-neutral-9) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-95 {
  --med-color-neutral: var(--med-color-neutral-95) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-neutral-10 {
  --med-color-neutral: var(--med-color-neutral-10) !important;
  --med-color-neutral-contrast: var(--med-color-neutral-1) !important;
}

.med-color-fb-attention {
  --med-color-feedback: var(--med-color-fb-attention) !important;
  --med-color-feedback-contrast: var(--med-color-neutral-1) !important;
}

.med-color-fb-caution {
  --med-color-feedback: var(--med-color-fb-caution) !important;
  --med-color-feedback-contrast: var(--med-color-neutral-1) !important;
}

.med-color-fb-warning {
  --med-color-feedback: var(--med-color-fb-warning) !important;
  --med-color-feedback-contrast: var(--med-color-neutral-1) !important;
}

.med-color-fb-success {
  --med-color-feedback: var(--med-color-fb-success) !important;
  --med-color-feedback-contrast: var(--med-color-neutral-1) !important;
}

.med-color-brand {
  --med-color-1: var(--med-color-brand-1) !important;
  --med-color-2: var(--med-color-brand-2) !important;
  --med-color-3: var(--med-color-brand-3) !important;
  --med-color-4: var(--med-color-brand-4) !important;
  --med-color-5: var(--med-color-brand-5) !important;
  --med-color-gradient: var(--med-color-brand-gradient) !important;
}

/*# sourceMappingURL=default.css.map */
.theme-medsoft {
  /* color */
  --brand-hue: 188;
  --aula-hue: 168;
  --material-hue: 24;
  --questoes-hue: 200;
  --revalida-hue: 342;
  --provas-hue: 268;
  /* color tokens */
  --med-color-aula-1: var(--aula-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-1));
  --med-color-aula-2: var(--aula-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-2));
  --med-color-aula-3: var(--aula-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3, 0%) + var(--color-luminosity-3));
  --med-color-aula-4: var(--aula-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-4));
  --med-color-aula-5: var(--aula-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-5));
  --med-color-aula-gradient: linear-gradient(to right, hsl(var(--med-color-aula-3)), hsl(var(--med-color-aula-1)));
  --med-color-material-1: var(--material-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-1));
  --med-color-material-2: var(--material-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-2));
  --med-color-material-3: var(--material-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3, 0%) + var(--color-luminosity-3));
  --med-color-material-4: var(--material-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-4));
  --med-color-material-5: var(--material-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-5));
  --med-color-material-gradient: linear-gradient(to right, hsl(var(--med-color-material-3)), hsl(var(--med-color-material-1)));
  --med-color-questoes-1: var(--questoes-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-1));
  --med-color-questoes-2: var(--questoes-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-2));
  --med-color-questoes-3: var(--questoes-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3, 0%) + var(--color-luminosity-3));
  --med-color-questoes-4: var(--questoes-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-4));
  --med-color-questoes-5: var(--questoes-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-5));
  --med-color-questoes-gradient: linear-gradient(to right, hsl(var(--med-color-questoes-3)), hsl(var(--med-color-questoes-1)));
  --med-color-revalida-1: var(--revalida-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-1));
  --med-color-revalida-2: var(--revalida-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-2));
  --med-color-revalida-3: var(--revalida-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3, 0%) + var(--color-luminosity-3));
  --med-color-revalida-4: var(--revalida-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-4));
  --med-color-revalida-5: var(--revalida-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-5));
  --med-color-revalida-gradient: linear-gradient(to right, hsl(var(--med-color-revalida-3)), hsl(var(--med-color-revalida-1)));
  --med-color-provas-1: var(--provas-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-1));
  --med-color-provas-2: var(--provas-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-1, 0%) + var(--color-luminosity-2));
  --med-color-provas-3: var(--provas-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-3, 0%) + var(--color-luminosity-3));
  --med-color-provas-4: var(--provas-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-4));
  --med-color-provas-5: var(--provas-hue), calc(var(--color-saturation) + var(--saturation-fator, 0%)), calc(var(--color-luminosity-mutable-2, 0%) + var(--color-luminosity-5));
  --med-color-provas-gradient: linear-gradient(to right, hsl(var(--med-color-provas-3)), hsl(var(--med-color-provas-1)));
}

.med-color-aula {
  --med-color-1: var(--med-color-aula-1) !important;
  --med-color-2: var(--med-color-aula-2) !important;
  --med-color-3: var(--med-color-aula-3) !important;
  --med-color-4: var(--med-color-aula-4) !important;
  --med-color-5: var(--med-color-aula-5) !important;
  --med-color-gradient: var(--med-color-aula-gradient) !important;
}

.med-color-material {
  --med-color-1: var(--med-color-material-1) !important;
  --med-color-2: var(--med-color-material-2) !important;
  --med-color-3: var(--med-color-material-3) !important;
  --med-color-4: var(--med-color-material-4) !important;
  --med-color-5: var(--med-color-material-5) !important;
  --med-color-gradient: var(--med-color-material-gradient) !important;
}

.med-color-questoes {
  --med-color-1: var(--med-color-questoes-1) !important;
  --med-color-2: var(--med-color-questoes-2) !important;
  --med-color-3: var(--med-color-questoes-3) !important;
  --med-color-4: var(--med-color-questoes-4) !important;
  --med-color-5: var(--med-color-questoes-5) !important;
  --med-color-gradient: var(--med-color-questoes-gradient) !important;
}

.med-color-revalida {
  --med-color-1: var(--med-color-revalida-1) !important;
  --med-color-2: var(--med-color-revalida-2) !important;
  --med-color-3: var(--med-color-revalida-3) !important;
  --med-color-4: var(--med-color-revalida-4) !important;
  --med-color-5: var(--med-color-revalida-5) !important;
  --med-color-gradient: var(--med-color-revalida-gradient) !important;
}

.med-color-provas {
  --med-color-1: var(--med-color-provas-1) !important;
  --med-color-2: var(--med-color-provas-2) !important;
  --med-color-3: var(--med-color-provas-3) !important;
  --med-color-4: var(--med-color-provas-4) !important;
  --med-color-5: var(--med-color-provas-5) !important;
  --med-color-gradient: var(--med-color-provas-gradient) !important;
}

/*# sourceMappingURL=medsoft.css.map */
.scheme-light,
[color-scheme=light] {
  /* neutral */
  --neutral-luminosity: 98%;
  --neutral-step-luminosity: 93%;
  /* color */
  --color-saturation: 40%;
  --color-luminosity-1: 80%;
  --color-luminosity-2: 60%;
  --color-luminosity-3: 40%;
  --color-luminosity-4: 30%;
  --color-luminosity-5: 20%;
  --med-color-contrast-fixed: var(--med-color-neutral-1);
  /* feedback */
  --feedback-luminosity: 45%;
  --med-color-fb-success: var(--feedback-success-hue), calc(var(--feedback-saturation) + var(--feedback-saturation-fator, 0%)), 35%;
  /* neutral mutables */
  --neutral-luminosity-mutable-1: var(--luminosity-fator-2, 0%);
  --neutral-luminosity-mutable-2: var(--luminosity-fator-1, 0%);
  --neutral-invert: -1;
  /* color mutables */
  --color-luminosity-mutable-1: var(--luminosity-fator-2, 0%);
  --color-luminosity-mutable-2: var(--luminosity-fator-1, 0%);
}

.scheme-light.theme-extensivo,
[color-scheme=light].theme-extensivo {
  --brand-hue: 128;
  --neutral-hue: 188;
  --color-saturation: 45%;
  --color-luminosity-1: 45%;
  --color-luminosity-2: 45%;
  --color-luminosity-3: 45%;
  --color-luminosity-4: 45%;
  --color-luminosity-5: 45%;
}

/*# sourceMappingURL=light.css.map */
[tp-avatar] {
  --width: 48px;
  --height: 48px;
  width: var(--width);
  height: var(--height);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--med-color-brand-4));
  border-radius: 50%;
}

[tp-avatar] :first-child {
  border-radius: 50%;
}

[tp-avatar] label {
  color: hsl(var(--med-color-neutral-10));
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
}

[tp-avatar][ds-size=xxl] {
  --width: 80px;
  --height: 80px;
}

[tp-avatar][ds-size=xxl] label {
  font-size: 32px;
  line-height: 32px;
  font-weight: 600;
}

[tp-avatar][ds-size=xl] {
  --width: 72px;
  --height: 72px;
}

[tp-avatar][ds-size=xl] label {
  font-size: 32px;
  line-height: 32px;
  font-weight: 600;
}

[tp-avatar][ds-size=lg] {
  --width: 64px;
  --height: 64px;
}

[tp-avatar][ds-size=lg] label {
  font-size: 32px;
  line-height: 32px;
  font-weight: 600;
}

[tp-avatar][ds-size=md] {
  --width: 56px;
  --height: 56px;
}

[tp-avatar][ds-size=md] label {
  font-size: 24px;
  line-height: 24px;
  font-weight: 600;
}

[tp-avatar][ds-size=sm] {
  --width: 40px;
  --height: 40px;
}

[tp-avatar][ds-size=sm] label {
  font-size: 20px;
  line-height: 20px;
  font-weight: 600;
}

[tp-avatar][ds-size=xs] {
  --width: 32px;
  --height: 32px;
}

[tp-avatar][ds-size=xs] label {
  font-size: 16px;
  line-height: 16px;
  font-weight: 600;
}

[tp-avatar][ds-size=xxs] {
  --width: 24px;
  --height: 24px;
}

[tp-avatar][ds-size=xxs] label {
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
}

[tp-avatar][ds-color=brand] {
  background: hsl(var(--med-color-brand-3));
}

[tp-avatar][ds-color=brand] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=aula] {
  background: hsl(var(--med-color-aula-3));
}

[tp-avatar][ds-color=aula] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=material] {
  background: hsl(var(--med-color-material-3));
}

[tp-avatar][ds-color=material] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=questoes] {
  background: hsl(var(--med-color-questoes-3));
}

[tp-avatar][ds-color=questoes] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=revalida] {
  background: hsl(var(--med-color-revalida-3));
}

[tp-avatar][ds-color=revalida] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=provas] {
  background: hsl(var(--med-color-provas-3));
}

[tp-avatar][ds-color=provas] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-1] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-1] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-2] {
  background: hsl(var(--med-color-neutral-2));
}

[tp-avatar][ds-color=neutral-2] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-3] {
  background: hsl(var(--med-color-neutral-3));
}

[tp-avatar][ds-color=neutral-3] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-4] {
  background: hsl(var(--med-color-neutral-4));
}

[tp-avatar][ds-color=neutral-4] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-5] {
  background: hsl(var(--med-color-neutral-5));
}

[tp-avatar][ds-color=neutral-5] label {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-6] {
  background: hsl(var(--med-color-neutral-6));
}

[tp-avatar][ds-color=neutral-6] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-7] {
  background: hsl(var(--med-color-neutral-7));
}

[tp-avatar][ds-color=neutral-7] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-8] {
  background: hsl(var(--med-color-neutral-8));
}

[tp-avatar][ds-color=neutral-8] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-9] {
  background: hsl(var(--med-color-neutral-9));
}

[tp-avatar][ds-color=neutral-9] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-10] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-10] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-15] {
  background: hsl(var(--med-color-neutral-15));
}

[tp-avatar][ds-color=neutral-15] abel {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-25] {
  background: hsl(var(--med-color-neutral-25));
}

[tp-avatar][ds-color=neutral-25] abel {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-35] {
  background: hsl(var(--med-color-neutral-35));
}

[tp-avatar][ds-color=neutral-35] abel {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-45] {
  background: hsl(var(--med-color-neutral-45));
}

[tp-avatar][ds-color=neutral-45] abel {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-55] {
  background: hsl(var(--med-color-neutral-55));
}

[tp-avatar][ds-color=neutral-55] abel {
  color: hsl(var(--med-color-neutral-10));
}

[tp-avatar][ds-color=neutral-65] {
  background: hsl(var(--med-color-neutral-65));
}

[tp-avatar][ds-color=neutral-65] abel {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-75] {
  background: hsl(var(--med-color-neutral-75));
}

[tp-avatar][ds-color=neutral-75] abel {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-85] {
  background: hsl(var(--med-color-neutral-85));
}

[tp-avatar][ds-color=neutral-85] abel {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=neutral-95] {
  background: hsl(var(--med-color-neutral-95));
}

[tp-avatar][ds-color=neutral-95] abel {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=fb-attention] {
  background: hsl(var(--med-color-fb-attention));
}

[tp-avatar][ds-color=fb-attention] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=fb-caution] {
  background: hsl(var(--med-color-fb-caution));
}

[tp-avatar][ds-color=fb-caution] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=fb-warning] {
  background: hsl(var(--med-color-fb-warning));
}

[tp-avatar][ds-color=fb-warning] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-avatar][ds-color=fb-success] {
  background: hsl(var(--med-color-fb-success));
}

[tp-avatar][ds-color=fb-success] label {
  color: hsl(var(--med-color-neutral-1));
}

[tp-badge] {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --width: fit-content;
  --padding-top: 6px;
  --padding-bottom: 6px;
  --padding-start: 8px;
  --padding-end: 8px;
  background: var(--background);
  color: var(--color);
  width: var(--width);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
  border-radius: 4px;
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
}

[tp-badge][ds-size=md] {
  --padding-top: 8px;
  --padding-bottom: 8px;
  --padding-start: 12px;
  --padding-end: 12px;
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
  border: 1px solid transparent;
}

[tp-badge][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-brand-2));
  border: 1px solid hsl(var(--med-color-brand-2));
}

[tp-badge][ds-color=brand] {
  --background: hsl(var(--med-color-brand-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=brand][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-brand-2));
  border: 1px solid hsl(var(--med-color-brand-2));
}

[tp-badge][ds-color=aula] {
  --background: hsl(var(--med-color-aula-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=aula][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-aula-2));
  border: 1px solid hsl(var(--med-color-aula-2));
}

[tp-badge][ds-color=material] {
  --background: hsl(var(--med-color-material-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=material][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-material-2));
  border: 1px solid hsl(var(--med-color-material-2));
}

[tp-badge][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=questoes][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-questoes-2));
  border: 1px solid hsl(var(--med-color-questoes-2));
}

[tp-badge][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=revalida][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-revalida-2));
  border: 1px solid hsl(var(--med-color-revalida-2));
}

[tp-badge][ds-color=provas] {
  --background: hsl(var(--med-color-provas-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=provas][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-provas-2));
  border: 1px solid hsl(var(--med-color-provas-2));
}

[tp-badge][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-1][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-1));
  border: 1px solid hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-2][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-2));
  border: 1px solid hsl(var(--med-color-neutral-2));
}

[tp-badge][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-3][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-3));
  border: 1px solid hsl(var(--med-color-neutral-3));
}

[tp-badge][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-4][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-4));
  border: 1px solid hsl(var(--med-color-neutral-4));
}

[tp-badge][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-5][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
  border: 1px solid hsl(var(--med-color-neutral-5));
}

[tp-badge][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-6][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-6));
  border: 1px solid hsl(var(--med-color-neutral-6));
}

[tp-badge][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-7][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-7));
  border: 1px solid hsl(var(--med-color-neutral-7));
}

[tp-badge][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-8][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-8));
  border: 1px solid hsl(var(--med-color-neutral-8));
}

[tp-badge][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-9][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-9));
  border: 1px solid hsl(var(--med-color-neutral-9));
}

[tp-badge][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-10][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-10));
  border: 1px solid hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-15][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-15));
  border: 1px solid hsl(var(--med-color-neutral-15));
}

[tp-badge][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-25][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-25));
  border: 1px solid hsl(var(--med-color-neutral-25));
}

[tp-badge][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-35][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-35));
  border: 1px solid hsl(var(--med-color-neutral-35));
}

[tp-badge][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-45][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-45));
  border: 1px solid hsl(var(--med-color-neutral-45));
}

[tp-badge][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-badge][ds-color=neutral-55][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-55));
  border: 1px solid hsl(var(--med-color-neutral-55));
}

[tp-badge][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-65][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-65));
  border: 1px solid hsl(var(--med-color-neutral-65));
}

[tp-badge][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-75][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-75));
  border: 1px solid hsl(var(--med-color-neutral-75));
}

[tp-badge][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-85][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-85));
  border: 1px solid hsl(var(--med-color-neutral-85));
}

[tp-badge][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=neutral-95][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-95));
  border: 1px solid hsl(var(--med-color-neutral-95));
}

[tp-badge][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=fb-attention][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-fb-attention));
  border: 1px solid hsl(var(--med-color-fb-attention));
}

[tp-badge][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=fb-caution][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-fb-caution));
  border: 1px solid hsl(var(--med-color-fb-caution));
}

[tp-badge][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=fb-warning][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-fb-warning));
  border: 1px solid hsl(var(--med-color-fb-warning));
}

[tp-badge][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-badge][ds-color=fb-success][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-fb-success));
  border: 1px solid hsl(var(--med-color-fb-success));
}

[tp-back-button] {
  --background: transparent;
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-6));
  --border-radius: 50%;
  --padding-top: 0;
  --padding-bottom: 0;
  --padding-start: 0;
  --padding-end: 0;
  --width: 32px;
  --height: 32px;
  overflow: hidden;
  border-radius: var(--border-radius);
  width: var(--width);
  height: var(--height);
  background: var(--background);
  display: flex;
  align-items: center;
  justify-content: center;
}

[tp-back-button] .med-icon {
  stroke: var(--color);
  min-width: 24px;
  min-height: 24px;
}

[tp-back-button]:hover {
  background: var(--background-hover);
}

[tp-back-button][disabled] {
  --color: hsl(var(--med-color-neutral-5));
}

[tp-back-button][disabled]:hover {
  background: transparent;
}

[tp-back-button][ds-size=lg] {
  --width: 64px;
  --height: 64px;
}

[tp-back-button][ds-size=md] {
  --width: 48px;
  --height: 48px;
}

[tp-back-button][ds-size=sm] {
  --width: 40px;
  --height: 40px;
}

[tp-back-button][ds-size=xxs] {
  --width: 24px;
  --height: 24px;
}

[tp-back-button][ds-size=xxxs] {
  --width: 24px;
  --height: 24px;
}

[tp-button] {
  --background: hsl(var(--med-color-brand-3));
  --background-hover: hsl(var(--med-color-brand-2));
  --color: hsl(var(--med-color-neutral-10));
  --padding: 16px 32px;
  --font-size: 16px;
  --line-height: 16px;
  --height: 48px;
  --width: initial;
  --height-icon: 24px;
  --width-icon: 24px;
  --border: 1px solid transparent;
  --border-radius: 100px;
  --transition: background-color 0.3s, color 0.3s, border-color 0.3s;
  --icon-transition: stroke 0.3s;
  cursor: pointer;
  border: var(--border);
  border-radius: var(--border-radius);
  padding: var(--padding);
  font-size: var(--font-size);
  font-weight: 600;
  color: var(--color);
  background-color: var(--background);
  line-height: var(--line-height);
  height: var(--height);
  width: var(--width);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  position: relative;
}

[tp-button] .med-icon {
  height: var(--height-icon);
  width: var(--width-icon);
  min-width: var(--width-icon);
  stroke: var(--color);
}

[tp-button] .med-icon:first-child {
  margin-left: -8px;
  margin-right: 8px;
}

[tp-button] .med-icon:last-child {
  margin-right: -8px;
  margin-left: 8px;
}

[tp-button][icon-only] {
  --height: 48px;
  --width: 48px;
  --padding: 12px;
}

[tp-button][icon-only] .med-icon {
  margin: 0;
}

[tp-button]::after {
  content: "";
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  border-radius: var(--border-radius);
  background: transparent;
  position: absolute;
  top: -1px;
  left: -1px;
  overflow: hidden;
}

[tp-button]:hover {
  --background: var(--background-hover);
}

[tp-button]:disabled {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
  pointer-events: none;
}

[tp-button][ds-size=sm] {
  --padding: 12px 32px;
  --height: 40px;
}

[tp-button][ds-size=sm][icon-only] {
  --width: 40px;
  --padding: 8px;
}

[tp-button][ds-size=xs] {
  --padding: 8px 24px;
  --height: 32px;
  --font-size: 14px;
}

[tp-button][ds-size=xs] .med-icon:first-child, [tp-button][ds-size=xs] .med-icon:last-child {
  --height-icon: 16px;
  --width-icon: 16px;
}

[tp-button][ds-size=xs][icon-only] {
  --width: 32px;
  --padding: 4px;
}

[tp-button][ds-size=xs][icon-only] .med-icon {
  --height-icon: 24px;
  --width-icon: 24px;
}

[tp-button][ds-size=xxs] {
  --padding: 6px 16px;
  --height: 24px;
  --font-size: 12px;
  --line-height: 12px;
}

[tp-button][ds-size=xxs] .med-icon {
  --height-icon: 16px;
  --width-icon: 16px;
}

[tp-button][ds-size=xxs] .med-icon:first-child {
  margin-left: -4px;
}

[tp-button][ds-size=xxs] .med-icon:last-child {
  margin-right: -4px;
}

[tp-button][ds-size=xxs][icon-only] {
  --width: 24px;
  --padding: 4px;
}

[tp-button][ds-size=xxs][icon-only] .med-icon {
  margin: 0;
}

[tp-button][expand=block] {
  --width: 100%;
  --display: block;
}

[tp-button][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
  --background-hover: hsl(var(--med-color-brand-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=brand][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=brand]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
  --background-hover: hsl(var(--med-color-aula-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=aula][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=aula]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
  --background-hover: hsl(var(--med-color-material-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=material][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=material]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
  --background-hover: hsl(var(--med-color-questoes-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=questoes][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=questoes]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
  --background-hover: hsl(var(--med-color-revalida-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=revalida][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=revalida]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
  --background-hover: hsl(var(--med-color-provas-2));
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=provas][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=provas]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-1][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-1]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-2][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-2]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-3][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-3]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-4][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-4]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-5][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-5]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-6][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-6]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-7][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-7]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-8][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-8]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-9][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-9]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-10][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-10]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-15][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-15]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-25][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-25]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-35][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-35]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-45][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-45]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
  --background-activated: hsla(var(--med-color-neutral-10), 0.08);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
  --color: hsl(var(--med-color-neutral-10));
  --color-activated: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-55][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-55]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-65][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-65]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-75][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-75]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-85][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-85]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
  --background-activated: hsl(var(--med-color-neutral-1), 0.08);
  --background-hover: hsl(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-95][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-95]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
  --background-activated: hsla(var(--med-color-neutral-1), 0.08);
  --background-hover: hsla(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=fb-attention][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-attention]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
  --background-activated: hsla(var(--med-color-neutral-1), 0.08);
  --background-hover: hsla(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=fb-caution][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-caution]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
  --background-activated: hsla(var(--med-color-neutral-1), 0.08);
  --background-hover: hsla(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=fb-warning][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-warning]:hover::after {
  background: var(--background-hover);
}

[tp-button][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
  --background-activated: hsla(var(--med-color-neutral-1), 0.08);
  --background-hover: hsla(var(--med-color-neutral-1), 0.08);
  --color: hsl(var(--med-color-neutral-1));
  --color-activated: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=fb-success][disabled] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-success]:hover::after {
  background: var(--background-hover);
}

[tp-button][fill=outline] {
  --background: transparent;
  --color: hsl(var(--med-color-brand-3));
  --border-color: hsl(var(--med-color-brand-3));
  --border-color-hover: hsl(var(--med-color-brand-2));
  border-color: var(--border-color);
}

[tp-button][fill=outline][icon-only] {
  --border: 2px solid var(--border-color);
}

[tp-button][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][fill=outline]:disabled {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=brand][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-brand-3));
  --border-color-hover: hsl(var(--med-color-brand-2));
  --color: hsl(var(--med-color-brand-3));
}

[tp-button][ds-color=brand][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=brand][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=aula][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-aula-3));
  --border-color-hover: hsl(var(--med-color-aula-2));
  --color: hsl(var(--med-color-aula-3));
}

[tp-button][ds-color=aula][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=aula][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=material][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-material-3));
  --border-color-hover: hsl(var(--med-color-material-2));
  --color: hsl(var(--med-color-material-3));
}

[tp-button][ds-color=material][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=material][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=questoes][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-questoes-3));
  --border-color-hover: hsl(var(--med-color-questoes-2));
  --color: hsl(var(--med-color-questoes-3));
}

[tp-button][ds-color=questoes][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=questoes][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=revalida][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-revalida-3));
  --border-color-hover: hsl(var(--med-color-revalida-2));
  --color: hsl(var(--med-color-revalida-3));
}

[tp-button][ds-color=revalida][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=revalida][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=provas][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-provas-3));
  --border-color-hover: hsl(var(--med-color-provas-2));
  --color: hsl(var(--med-color-provas-3));
}

[tp-button][ds-color=provas][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=provas][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-1][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-1));
  --border-color-hover: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-1][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-1][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-1][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-2][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-2));
  --border-color-hover: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-2));
}

[tp-button][ds-color=neutral-2][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-2][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-2][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-3][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-3));
  --border-color-hover: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-3));
}

[tp-button][ds-color=neutral-3][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-3][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-3][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-4][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-4));
  --border-color-hover: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-4));
}

[tp-button][ds-color=neutral-4][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-4][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-4][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-5][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-5));
  --border-color-hover: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-5][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-5][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-5][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-6][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-6));
  --border-color-hover: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-6));
}

[tp-button][ds-color=neutral-6][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-6][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-6][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-7][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-7));
  --border-color-hover: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-7));
}

[tp-button][ds-color=neutral-7][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-7][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-7][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-8][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-8));
  --border-color-hover: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-8));
}

[tp-button][ds-color=neutral-8][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-8][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-8][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-9][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-9));
  --border-color-hover: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-9));
}

[tp-button][ds-color=neutral-9][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-9][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-9][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-10][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-hover: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-10][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-10][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-10][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-15][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-15));
  --border-color-hover: hsl(var(--med-color-neutral-15));
  --color: hsl(var(--med-color-neutral-15));
}

[tp-button][ds-color=neutral-15][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-15][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-15][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-25][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-25));
  --border-color-hover: hsl(var(--med-color-neutral-25));
  --color: hsl(var(--med-color-neutral-25));
}

[tp-button][ds-color=neutral-25][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-25][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-25][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-35][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-35));
  --border-color-hover: hsl(var(--med-color-neutral-35));
  --color: hsl(var(--med-color-neutral-35));
}

[tp-button][ds-color=neutral-35][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-35][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-35][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-45][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-45));
  --border-color-hover: hsl(var(--med-color-neutral-45));
  --color: hsl(var(--med-color-neutral-45));
}

[tp-button][ds-color=neutral-45][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-45][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-45][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-55][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-55));
  --border-color-hover: hsl(var(--med-color-neutral-55));
  --color: hsl(var(--med-color-neutral-55));
}

[tp-button][ds-color=neutral-55][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-55][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-55][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-65][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-65));
  --border-color-hover: hsl(var(--med-color-neutral-65));
  --color: hsl(var(--med-color-neutral-65));
}

[tp-button][ds-color=neutral-65][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-65][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-65][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-75][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-75));
  --border-color-hover: hsl(var(--med-color-neutral-75));
  --color: hsl(var(--med-color-neutral-75));
}

[tp-button][ds-color=neutral-75][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-75][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-75][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-85][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-85));
  --border-color-hover: hsl(var(--med-color-neutral-85));
  --color: hsl(var(--med-color-neutral-85));
}

[tp-button][ds-color=neutral-85][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-85][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-85][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-95][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-neutral-95));
  --border-color-hover: hsl(var(--med-color-neutral-95));
  --color: hsl(var(--med-color-neutral-95));
}

[tp-button][ds-color=neutral-95][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=neutral-95][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=neutral-95][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-attention][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-fb-attention));
  --border-color-hover: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-fb-attention));
}

[tp-button][ds-color=fb-attention][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=fb-attention][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=fb-attention][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-caution][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-fb-caution));
  --border-color-hover: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-fb-caution));
}

[tp-button][ds-color=fb-caution][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=fb-caution][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=fb-caution][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-warning][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-fb-warning));
  --border-color-hover: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-fb-warning));
}

[tp-button][ds-color=fb-warning][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=fb-warning][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=fb-warning][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-success][fill=outline] {
  --background: transparent;
  --border-color: hsl(var(--med-color-fb-success));
  --border-color-hover: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-fb-success));
}

[tp-button][ds-color=fb-success][fill=outline]:hover {
  --border-color: var(--border-color-hover);
}

[tp-button][ds-color=fb-success][fill=outline]:hover::after {
  background: transparent;
}

[tp-button][ds-color=fb-success][fill=outline][disabled] {
  --border-color: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][fill=clear] {
  --background: transparent;
  --background-hover: transparent;
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-brand-3));
  --padding: 16px;
  --border-radius: 0;
}

[tp-button][fill=clear] .med-icon:first-child {
  margin-left: 0;
}

[tp-button][fill=clear] .med-icon:last-child {
  margin-right: 0;
}

[tp-button][fill=clear][icon-only] {
  --border-radius: 100px;
  --background-active: hsla(var(--med-color-neutral-10), 0.16);
  --background-hover: hsla(var(--med-color-neutral-10), 0.08);
}

[tp-button][fill=clear]:hover {
  --background: var(--background-hover);
  --color: var(--color-hover);
}

[tp-button][fill=clear]:hover[icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-button][fill=clear]:active {
  --background: var(--background-active);
}

[tp-button][fill=clear]:active[icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-button][fill=clear]:disabled {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
  pointer-events: none;
}

[tp-button][fill=clear][ds-size=sm] {
  --padding: 12px 16px;
}

[tp-button][fill=clear][ds-size=xs] {
  --padding: 8px 12px;
}

[tp-button][fill=clear][ds-size=xxs] {
  --padding: 4px 12px;
}

[tp-button][fill=clear][icon-only][ds-size=lg] {
  --height: 64px;
  --width: 64px;
  --height-icon: 48px;
  --width-icon: 48px;
}

[tp-button][fill=clear][icon-only][ds-size=md] {
  --height-icon: 32px;
  --width-icon: 32px;
}

[tp-button][fill=clear][icon-only][ds-size=xxs] {
  --height: 24px;
  --width: 24px;
  --padding: 0;
}

[tp-button][fill=clear][icon-only][ds-size=xxs] .med-icon {
  --height-icon: 24px;
  --width-icon: 24px;
}

[tp-button][fill=clear][icon-only][ds-size=xxxs] {
  --height: 16px;
  --width: 16px;
  --height-icon: 16px;
  --width-icon: 16px;
  --padding: 0;
}

[tp-button][fill=clear][no-padding=true] {
  padding-left: 0;
  padding-right: 0;
}

[tp-button][ds-color=brand][fill=clear] {
  --color-hover: hsl(var(--med-color-brand-3));
}

[tp-button][ds-color=brand][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=aula][fill=clear] {
  --color-hover: hsl(var(--med-color-aula-3));
}

[tp-button][ds-color=aula][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=material][fill=clear] {
  --color-hover: hsl(var(--med-color-material-3));
}

[tp-button][ds-color=material][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=questoes][fill=clear] {
  --color-hover: hsl(var(--med-color-questoes-3));
}

[tp-button][ds-color=questoes][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=revalida][fill=clear] {
  --color-hover: hsl(var(--med-color-revalida-3));
}

[tp-button][ds-color=revalida][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=provas][fill=clear] {
  --color-hover: hsl(var(--med-color-provas-3));
}

[tp-button][ds-color=provas][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-1][fill=clear] {
  --color: hsl(var(--med-color-neutral-1));
  --color-hover: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-1][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-1][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-button][ds-color=neutral-2][fill=clear] {
  --color: hsl(var(--med-color-neutral-2));
  --color-hover: hsl(var(--med-color-neutral-2));
}

[tp-button][ds-color=neutral-2][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-2][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-2));
}

[tp-button][ds-color=neutral-3][fill=clear] {
  --color: hsl(var(--med-color-neutral-3));
  --color-hover: hsl(var(--med-color-neutral-3));
}

[tp-button][ds-color=neutral-3][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-3][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-3));
}

[tp-button][ds-color=neutral-4][fill=clear] {
  --color: hsl(var(--med-color-neutral-4));
  --color-hover: hsl(var(--med-color-neutral-4));
}

[tp-button][ds-color=neutral-4][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-4][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-4));
}

[tp-button][ds-color=neutral-5][fill=clear] {
  --color: hsl(var(--med-color-neutral-5));
  --color-hover: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-5][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-5][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-6][fill=clear] {
  --color: hsl(var(--med-color-neutral-6));
  --color-hover: hsl(var(--med-color-neutral-6));
}

[tp-button][ds-color=neutral-6][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-6][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-6));
}

[tp-button][ds-color=neutral-7][fill=clear] {
  --color: hsl(var(--med-color-neutral-7));
  --color-hover: hsl(var(--med-color-neutral-7));
}

[tp-button][ds-color=neutral-7][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-7][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-7));
}

[tp-button][ds-color=neutral-8][fill=clear] {
  --color: hsl(var(--med-color-neutral-8));
  --color-hover: hsl(var(--med-color-neutral-8));
}

[tp-button][ds-color=neutral-8][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-8][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-8));
}

[tp-button][ds-color=neutral-9][fill=clear] {
  --color: hsl(var(--med-color-neutral-9));
  --color-hover: hsl(var(--med-color-neutral-9));
}

[tp-button][ds-color=neutral-9][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-9][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-9));
}

[tp-button][ds-color=neutral-10][fill=clear] {
  --color: hsl(var(--med-color-neutral-10));
  --color-hover: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-10][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-10][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-button][ds-color=neutral-15][fill=clear] {
  --color: hsl(var(--med-color-neutral-15));
  --color-hover: hsl(var(--med-color-neutral-15));
}

[tp-button][ds-color=neutral-15][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-15][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-15));
}

[tp-button][ds-color=neutral-25][fill=clear] {
  --color: hsl(var(--med-color-neutral-25));
  --color-hover: hsl(var(--med-color-neutral-25));
}

[tp-button][ds-color=neutral-25][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-25][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-25));
}

[tp-button][ds-color=neutral-35][fill=clear] {
  --color: hsl(var(--med-color-neutral-35));
  --color-hover: hsl(var(--med-color-neutral-35));
}

[tp-button][ds-color=neutral-35][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-35][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-35));
}

[tp-button][ds-color=neutral-45][fill=clear] {
  --color: hsl(var(--med-color-neutral-45));
  --color-hover: hsl(var(--med-color-neutral-45));
}

[tp-button][ds-color=neutral-45][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-45][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-45));
}

[tp-button][ds-color=neutral-55][fill=clear] {
  --color: hsl(var(--med-color-neutral-55));
  --color-hover: hsl(var(--med-color-neutral-55));
}

[tp-button][ds-color=neutral-55][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-55][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-55));
}

[tp-button][ds-color=neutral-65][fill=clear] {
  --color: hsl(var(--med-color-neutral-65));
  --color-hover: hsl(var(--med-color-neutral-65));
}

[tp-button][ds-color=neutral-65][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-65][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-65));
}

[tp-button][ds-color=neutral-75][fill=clear] {
  --color: hsl(var(--med-color-neutral-75));
  --color-hover: hsl(var(--med-color-neutral-75));
}

[tp-button][ds-color=neutral-75][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-75][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-75));
}

[tp-button][ds-color=neutral-85][fill=clear] {
  --color: hsl(var(--med-color-neutral-85));
  --color-hover: hsl(var(--med-color-neutral-85));
}

[tp-button][ds-color=neutral-85][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-85][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-85));
}

[tp-button][ds-color=neutral-95][fill=clear] {
  --color: hsl(var(--med-color-neutral-95));
  --color-hover: hsl(var(--med-color-neutral-95));
}

[tp-button][ds-color=neutral-95][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=neutral-95][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-neutral-95));
}

[tp-button][ds-color=fb-attention][fill=clear] {
  --color: hsl(var(--med-color-fb-attention));
  --color-hover: hsl(var(--med-color-fb-attention));
}

[tp-button][ds-color=fb-attention][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-attention][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-fb-attention));
}

[tp-button][ds-color=fb-caution][fill=clear] {
  --color: hsl(var(--med-color-fb-caution));
  --color-hover: hsl(var(--med-color-fb-caution));
}

[tp-button][ds-color=fb-caution][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-caution][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-fb-caution));
}

[tp-button][ds-color=fb-warning][fill=clear] {
  --color: hsl(var(--med-color-fb-warning));
  --color-hover: hsl(var(--med-color-fb-warning));
}

[tp-button][ds-color=fb-warning][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-warning][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-fb-warning));
}

[tp-button][ds-color=fb-success][fill=clear] {
  --color: hsl(var(--med-color-fb-success));
  --color-hover: hsl(var(--med-color-fb-success));
}

[tp-button][ds-color=fb-success][fill=clear][disabled] {
  --background: transparent;
  --color: hsl(var(--med-color-neutral-5));
}

[tp-button][ds-color=fb-success][fill=clear][icon-only] .med-icon {
  stroke: hsl(var(--med-color-fb-success));
}

[tp-container-checkbox] {
  --border-color-label: hsl(var(--med-color-neutral-3));
  --checkmark-color: hsl(var(--med-color-neutral-2));
  --background: transparent;
  --border-color: hsl(var(--med-color-brand-4));
  --border-color-checked: hsl(var(--med-color-brand-4));
  --background-checked: hsl(var(--med-color-brand-4));
  --checkmark-color: hsl(var(--med-color-neutral-2));
  --border-radius: 4px;
  --size: 20px;
  --size-icon: 16px;
  --transition: background-color 300ms ease-out, border-color 300ms ease-out;
  --transition-icon: opacity 300ms ease-out;
  --margin: 0 8px 0 0;
  --opacity-icon: 0;
  display: flex;
  align-items: center;
}

[tp-container-checkbox] [tp-label] {
  display: flex;
  align-items: center;
  width: 100%;
}

[tp-container-checkbox] [tp-checkbox-frame] {
  height: var(--size);
  width: var(--size);
  border-radius: var(--border-radius);
  border: 2px solid var(--border-color);
  background: var(--background);
  margin: var(--margin);
  transition: var(--transition);
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
}

[tp-container-checkbox] [tp-checkbox-frame] .med-icon {
  --ionicon-stroke-width: 3px;
  height: var(--size-icon);
  width: var(--size-icon);
  stroke: var(--checkmark-color);
  opacity: var(--opacity-icon);
  transition: var(--transition-icon);
}

[tp-checkbox] {
  display: none;
}

[tp-checkbox] + [tp-label] {
  cursor: pointer;
}

[tp-checkbox]:checked + [tp-label] [tp-checkbox-frame] {
  --background: var(--background-checked);
}

[tp-checkbox]:checked + [tp-label] [tp-checkbox-frame] .med-icon {
  --opacity-icon: 1;
}

[inverted] [tp-checkbox] + [tp-label] [tp-checkbox-frame] {
  --margin: 0 0 0 auto;
  order: 1;
}

[tp-checkbox] + [tp-label]:hover, [tp-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-brand-5));
  --border-color-checked: hsl(var(--med-color-brand-5));
  --background-checked: hsl(var(--med-color-brand-5));
}

[tp-container-checkbox][disabled] {
  pointer-events: none;
  opacity: 0.4;
}

[tp-container-checkbox][ds-color=brand] [tp-label] {
  --border-color: hsl(var(--med-color-brand-4));
  --border-color-checked: hsl(var(--med-color-brand-4));
  --background-checked: hsl(var(--med-color-brand-4));
}

[tp-container-checkbox][ds-color=brand] [tp-label]:hover, [tp-container-checkbox][ds-color=brand] [tp-label]:focus {
  --border-color: hsl(var(--med-color-brand-5));
  --border-color-checked: hsl(var(--med-color-brand-5));
  --background-checked: hsl(var(--med-color-brand-5));
}

[tp-container-checkbox][ds-color=aula] [tp-label] {
  --border-color: hsl(var(--med-color-aula-4));
  --border-color-checked: hsl(var(--med-color-aula-4));
  --background-checked: hsl(var(--med-color-aula-4));
}

[tp-container-checkbox][ds-color=aula] [tp-label]:hover, [tp-container-checkbox][ds-color=aula] [tp-label]:focus {
  --border-color: hsl(var(--med-color-aula-5));
  --border-color-checked: hsl(var(--med-color-aula-5));
  --background-checked: hsl(var(--med-color-aula-5));
}

[tp-container-checkbox][ds-color=material] [tp-label] {
  --border-color: hsl(var(--med-color-material-4));
  --border-color-checked: hsl(var(--med-color-material-4));
  --background-checked: hsl(var(--med-color-material-4));
}

[tp-container-checkbox][ds-color=material] [tp-label]:hover, [tp-container-checkbox][ds-color=material] [tp-label]:focus {
  --border-color: hsl(var(--med-color-material-5));
  --border-color-checked: hsl(var(--med-color-material-5));
  --background-checked: hsl(var(--med-color-material-5));
}

[tp-container-checkbox][ds-color=questoes] [tp-label] {
  --border-color: hsl(var(--med-color-questoes-4));
  --border-color-checked: hsl(var(--med-color-questoes-4));
  --background-checked: hsl(var(--med-color-questoes-4));
}

[tp-container-checkbox][ds-color=questoes] [tp-label]:hover, [tp-container-checkbox][ds-color=questoes] [tp-label]:focus {
  --border-color: hsl(var(--med-color-questoes-5));
  --border-color-checked: hsl(var(--med-color-questoes-5));
  --background-checked: hsl(var(--med-color-questoes-5));
}

[tp-container-checkbox][ds-color=revalida] [tp-label] {
  --border-color: hsl(var(--med-color-revalida-4));
  --border-color-checked: hsl(var(--med-color-revalida-4));
  --background-checked: hsl(var(--med-color-revalida-4));
}

[tp-container-checkbox][ds-color=revalida] [tp-label]:hover, [tp-container-checkbox][ds-color=revalida] [tp-label]:focus {
  --border-color: hsl(var(--med-color-revalida-5));
  --border-color-checked: hsl(var(--med-color-revalida-5));
  --background-checked: hsl(var(--med-color-revalida-5));
}

[tp-container-checkbox][ds-color=provas] [tp-label] {
  --border-color: hsl(var(--med-color-provas-4));
  --border-color-checked: hsl(var(--med-color-provas-4));
  --background-checked: hsl(var(--med-color-provas-4));
}

[tp-container-checkbox][ds-color=provas] [tp-label]:hover, [tp-container-checkbox][ds-color=provas] [tp-label]:focus {
  --border-color: hsl(var(--med-color-provas-5));
  --border-color-checked: hsl(var(--med-color-provas-5));
  --background-checked: hsl(var(--med-color-provas-5));
}

[tp-container-checkbox][ds-color=neutral-1] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-1));
  --border-color-checked: hsl(var(--med-color-neutral-1));
  --background-checked: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-1] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-1] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-1));
  --border-color-checked: hsl(var(--med-color-neutral-1));
  --background-checked: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-1] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-2] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-2));
  --border-color-checked: hsl(var(--med-color-neutral-2));
  --background-checked: hsl(var(--med-color-neutral-2));
}

[tp-container-checkbox][ds-color=neutral-2] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-2] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-2));
  --border-color-checked: hsl(var(--med-color-neutral-2));
  --background-checked: hsl(var(--med-color-neutral-2));
}

[tp-container-checkbox][ds-color=neutral-2] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-3] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-3));
  --border-color-checked: hsl(var(--med-color-neutral-3));
  --background-checked: hsl(var(--med-color-neutral-3));
}

[tp-container-checkbox][ds-color=neutral-3] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-3] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-3));
  --border-color-checked: hsl(var(--med-color-neutral-3));
  --background-checked: hsl(var(--med-color-neutral-3));
}

[tp-container-checkbox][ds-color=neutral-3] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-4] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-4));
  --border-color-checked: hsl(var(--med-color-neutral-4));
  --background-checked: hsl(var(--med-color-neutral-4));
}

[tp-container-checkbox][ds-color=neutral-4] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-4] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-4));
  --border-color-checked: hsl(var(--med-color-neutral-4));
  --background-checked: hsl(var(--med-color-neutral-4));
}

[tp-container-checkbox][ds-color=neutral-4] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-5] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-5));
  --border-color-checked: hsl(var(--med-color-neutral-5));
  --background-checked: hsl(var(--med-color-neutral-5));
}

[tp-container-checkbox][ds-color=neutral-5] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-5] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-5));
  --border-color-checked: hsl(var(--med-color-neutral-5));
  --background-checked: hsl(var(--med-color-neutral-5));
}

[tp-container-checkbox][ds-color=neutral-5] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-6] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-6));
  --border-color-checked: hsl(var(--med-color-neutral-6));
  --background-checked: hsl(var(--med-color-neutral-6));
}

[tp-container-checkbox][ds-color=neutral-6] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-6] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-6));
  --border-color-checked: hsl(var(--med-color-neutral-6));
  --background-checked: hsl(var(--med-color-neutral-6));
}

[tp-container-checkbox][ds-color=neutral-6] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-7] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-7));
  --border-color-checked: hsl(var(--med-color-neutral-7));
  --background-checked: hsl(var(--med-color-neutral-7));
}

[tp-container-checkbox][ds-color=neutral-7] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-7] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-7));
  --border-color-checked: hsl(var(--med-color-neutral-7));
  --background-checked: hsl(var(--med-color-neutral-7));
}

[tp-container-checkbox][ds-color=neutral-7] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-8] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-8));
  --border-color-checked: hsl(var(--med-color-neutral-8));
  --background-checked: hsl(var(--med-color-neutral-8));
}

[tp-container-checkbox][ds-color=neutral-8] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-8] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-8));
  --border-color-checked: hsl(var(--med-color-neutral-8));
  --background-checked: hsl(var(--med-color-neutral-8));
}

[tp-container-checkbox][ds-color=neutral-8] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-9] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-9));
  --border-color-checked: hsl(var(--med-color-neutral-9));
  --background-checked: hsl(var(--med-color-neutral-9));
}

[tp-container-checkbox][ds-color=neutral-9] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-9] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-9));
  --border-color-checked: hsl(var(--med-color-neutral-9));
  --background-checked: hsl(var(--med-color-neutral-9));
}

[tp-container-checkbox][ds-color=neutral-9] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-10] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-10] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-10] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-10] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-15] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-15));
  --border-color-checked: hsl(var(--med-color-neutral-15));
  --background-checked: hsl(var(--med-color-neutral-15));
}

[tp-container-checkbox][ds-color=neutral-15] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-15] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-15));
  --border-color-checked: hsl(var(--med-color-neutral-15));
  --background-checked: hsl(var(--med-color-neutral-15));
}

[tp-container-checkbox][ds-color=neutral-15] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-25] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-25));
  --border-color-checked: hsl(var(--med-color-neutral-25));
  --background-checked: hsl(var(--med-color-neutral-25));
}

[tp-container-checkbox][ds-color=neutral-25] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-25] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-25));
  --border-color-checked: hsl(var(--med-color-neutral-25));
  --background-checked: hsl(var(--med-color-neutral-25));
}

[tp-container-checkbox][ds-color=neutral-25] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-35] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-35));
  --border-color-checked: hsl(var(--med-color-neutral-35));
  --background-checked: hsl(var(--med-color-neutral-35));
}

[tp-container-checkbox][ds-color=neutral-35] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-35] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-35));
  --border-color-checked: hsl(var(--med-color-neutral-35));
  --background-checked: hsl(var(--med-color-neutral-35));
}

[tp-container-checkbox][ds-color=neutral-35] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-45] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-45));
  --border-color-checked: hsl(var(--med-color-neutral-45));
  --background-checked: hsl(var(--med-color-neutral-45));
}

[tp-container-checkbox][ds-color=neutral-45] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-45] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-45));
  --border-color-checked: hsl(var(--med-color-neutral-45));
  --background-checked: hsl(var(--med-color-neutral-45));
}

[tp-container-checkbox][ds-color=neutral-45] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-55] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-55));
  --border-color-checked: hsl(var(--med-color-neutral-55));
  --background-checked: hsl(var(--med-color-neutral-55));
}

[tp-container-checkbox][ds-color=neutral-55] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-55] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-55));
  --border-color-checked: hsl(var(--med-color-neutral-55));
  --background-checked: hsl(var(--med-color-neutral-55));
}

[tp-container-checkbox][ds-color=neutral-55] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-10));
}

[tp-container-checkbox][ds-color=neutral-65] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-65));
  --border-color-checked: hsl(var(--med-color-neutral-65));
  --background-checked: hsl(var(--med-color-neutral-65));
}

[tp-container-checkbox][ds-color=neutral-65] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-65] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-65));
  --border-color-checked: hsl(var(--med-color-neutral-65));
  --background-checked: hsl(var(--med-color-neutral-65));
}

[tp-container-checkbox][ds-color=neutral-65] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-75] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-75));
  --border-color-checked: hsl(var(--med-color-neutral-75));
  --background-checked: hsl(var(--med-color-neutral-75));
}

[tp-container-checkbox][ds-color=neutral-75] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-75] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-75));
  --border-color-checked: hsl(var(--med-color-neutral-75));
  --background-checked: hsl(var(--med-color-neutral-75));
}

[tp-container-checkbox][ds-color=neutral-75] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-85] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-85));
  --border-color-checked: hsl(var(--med-color-neutral-85));
  --background-checked: hsl(var(--med-color-neutral-85));
}

[tp-container-checkbox][ds-color=neutral-85] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-85] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-85));
  --border-color-checked: hsl(var(--med-color-neutral-85));
  --background-checked: hsl(var(--med-color-neutral-85));
}

[tp-container-checkbox][ds-color=neutral-85] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=neutral-95] [tp-label] {
  --border-color: hsl(var(--med-color-neutral-95));
  --border-color-checked: hsl(var(--med-color-neutral-95));
  --background-checked: hsl(var(--med-color-neutral-95));
}

[tp-container-checkbox][ds-color=neutral-95] [tp-label]:hover, [tp-container-checkbox][ds-color=neutral-95] [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-95));
  --border-color-checked: hsl(var(--med-color-neutral-95));
  --background-checked: hsl(var(--med-color-neutral-95));
}

[tp-container-checkbox][ds-color=neutral-95] [tp-checkbox]:checked + [tp-label] .med-icon {
  --checkmark-color: hsl(var(--med-color-neutral-1));
}

[tp-container-checkbox][ds-color=fb-attention] [tp-label] {
  --border-color: hsl(var(--med-color-fb-attention));
  --border-color-checked: hsl(var(--med-color-fb-attention));
  --background-checked: hsl(var(--med-color-fb-attention));
}

[tp-container-checkbox][ds-color=fb-attention] [tp-label]:hover, [tp-container-checkbox][ds-color=fb-attention] [tp-label]:focus {
  --border-color: hsl(var(--med-color-fb-attention));
  --border-color-checked: hsl(var(--med-color-fb-attention));
  --background-checked: hsl(var(--med-color-fb-attention));
}

[tp-container-checkbox][ds-color=fb-caution] [tp-label] {
  --border-color: hsl(var(--med-color-fb-caution));
  --border-color-checked: hsl(var(--med-color-fb-caution));
  --background-checked: hsl(var(--med-color-fb-caution));
}

[tp-container-checkbox][ds-color=fb-caution] [tp-label]:hover, [tp-container-checkbox][ds-color=fb-caution] [tp-label]:focus {
  --border-color: hsl(var(--med-color-fb-caution));
  --border-color-checked: hsl(var(--med-color-fb-caution));
  --background-checked: hsl(var(--med-color-fb-caution));
}

[tp-container-checkbox][ds-color=fb-warning] [tp-label] {
  --border-color: hsl(var(--med-color-fb-warning));
  --border-color-checked: hsl(var(--med-color-fb-warning));
  --background-checked: hsl(var(--med-color-fb-warning));
}

[tp-container-checkbox][ds-color=fb-warning] [tp-label]:hover, [tp-container-checkbox][ds-color=fb-warning] [tp-label]:focus {
  --border-color: hsl(var(--med-color-fb-warning));
  --border-color-checked: hsl(var(--med-color-fb-warning));
  --background-checked: hsl(var(--med-color-fb-warning));
}

[tp-container-checkbox][ds-color=fb-success] [tp-label] {
  --border-color: hsl(var(--med-color-fb-success));
  --border-color-checked: hsl(var(--med-color-fb-success));
  --background-checked: hsl(var(--med-color-fb-success));
}

[tp-container-checkbox][ds-color=fb-success] [tp-label]:hover, [tp-container-checkbox][ds-color=fb-success] [tp-label]:focus {
  --border-color: hsl(var(--med-color-fb-success));
  --border-color-checked: hsl(var(--med-color-fb-success));
  --background-checked: hsl(var(--med-color-fb-success));
}

[tp-chip] {
  --background: transparent;
  --color: hsl(var(--med-color-brand-3));
  --width: fit-content;
  --border-color: hsl(var(--med-color-brand-3));
  --icon-color: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-brand-3));
  display: flex;
  align-items: center;
  background: var(--background);
  color: var(--color);
  width: var(--width);
  border: 1px solid var(--border-color);
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
  height: 28px;
  padding: 7px;
  border-radius: 16px;
}

[tp-chip] ion-icon:first-child {
  margin-inline: -2px 8px;
}

[tp-chip] ion-icon:last-child {
  margin-inline: 8px -2px;
}

[tp-chip] label {
  color: var(--color);
  font-weight: 600;
  font-size: 12px;
  line-height: 12px;
}

[tp-chip] .med-icon {
  stroke: var(--icon-color);
  background-color: var(--icon-background);
  border-radius: 50%;
  font-size: 16px;
  padding: 2px;
  width: 16px;
  height: 16px;
}

[tp-chip][ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-2));
}

[tp-chip][ds-size=md] {
  height: 32px;
}

[tp-chip][ds-size=md] label {
  font-weight: 600;
  font-size: 14px;
  line-height: 16px;
}

[tp-chip][ds-size=md] .med-icon {
  padding: 4px;
}

[tp-chip][disabled] {
  opacity: 0.5;
  pointer-events: none;
}

[tp-chip][active], [tp-chip].ion-focused, [tp-chip].ion-activated {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-brand-3));
  --icon-color: hsl(var(--med-color-brand-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip]:hover {
    --background: hsl(var(--med-color-brand-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-brand-3));
    --icon-color: hsl(var(--med-color-brand-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=brand] {
  --color: hsl(var(--med-color-brand-3));
  --border-color: hsl(var(--med-color-brand-3));
  --background-hover: hsl(var(--med-color-brand-3));
  --background-active: hsl(var(--med-color-brand-3));
  --icon-background: hsl(var(--med-color-brand-3));
}

[tp-chip][ds-color=brand][active], [tp-chip][ds-color=brand].ion-focused, [tp-chip][ds-color=brand].ion-activated {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-brand-3));
  --icon-color: hsl(var(--med-color-brand-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=brand]:hover {
    --background: hsl(var(--med-color-brand-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-brand-3));
    --icon-color: hsl(var(--med-color-brand-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=aula] {
  --color: hsl(var(--med-color-aula-3));
  --border-color: hsl(var(--med-color-aula-3));
  --background-hover: hsl(var(--med-color-aula-3));
  --background-active: hsl(var(--med-color-aula-3));
  --icon-background: hsl(var(--med-color-aula-3));
}

[tp-chip][ds-color=aula][active], [tp-chip][ds-color=aula].ion-focused, [tp-chip][ds-color=aula].ion-activated {
  --background: hsl(var(--med-color-aula-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-aula-3));
  --icon-color: hsl(var(--med-color-aula-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=aula]:hover {
    --background: hsl(var(--med-color-aula-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-aula-3));
    --icon-color: hsl(var(--med-color-aula-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=material] {
  --color: hsl(var(--med-color-material-3));
  --border-color: hsl(var(--med-color-material-3));
  --background-hover: hsl(var(--med-color-material-3));
  --background-active: hsl(var(--med-color-material-3));
  --icon-background: hsl(var(--med-color-material-3));
}

[tp-chip][ds-color=material][active], [tp-chip][ds-color=material].ion-focused, [tp-chip][ds-color=material].ion-activated {
  --background: hsl(var(--med-color-material-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-material-3));
  --icon-color: hsl(var(--med-color-material-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=material]:hover {
    --background: hsl(var(--med-color-material-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-material-3));
    --icon-color: hsl(var(--med-color-material-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=questoes] {
  --color: hsl(var(--med-color-questoes-3));
  --border-color: hsl(var(--med-color-questoes-3));
  --background-hover: hsl(var(--med-color-questoes-3));
  --background-active: hsl(var(--med-color-questoes-3));
  --icon-background: hsl(var(--med-color-questoes-3));
}

[tp-chip][ds-color=questoes][active], [tp-chip][ds-color=questoes].ion-focused, [tp-chip][ds-color=questoes].ion-activated {
  --background: hsl(var(--med-color-questoes-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-questoes-3));
  --icon-color: hsl(var(--med-color-questoes-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=questoes]:hover {
    --background: hsl(var(--med-color-questoes-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-questoes-3));
    --icon-color: hsl(var(--med-color-questoes-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=revalida] {
  --color: hsl(var(--med-color-revalida-3));
  --border-color: hsl(var(--med-color-revalida-3));
  --background-hover: hsl(var(--med-color-revalida-3));
  --background-active: hsl(var(--med-color-revalida-3));
  --icon-background: hsl(var(--med-color-revalida-3));
}

[tp-chip][ds-color=revalida][active], [tp-chip][ds-color=revalida].ion-focused, [tp-chip][ds-color=revalida].ion-activated {
  --background: hsl(var(--med-color-revalida-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-revalida-3));
  --icon-color: hsl(var(--med-color-revalida-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=revalida]:hover {
    --background: hsl(var(--med-color-revalida-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-revalida-3));
    --icon-color: hsl(var(--med-color-revalida-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=provas] {
  --color: hsl(var(--med-color-provas-3));
  --border-color: hsl(var(--med-color-provas-3));
  --background-hover: hsl(var(--med-color-provas-3));
  --background-active: hsl(var(--med-color-provas-3));
  --icon-background: hsl(var(--med-color-provas-3));
}

[tp-chip][ds-color=provas][active], [tp-chip][ds-color=provas].ion-focused, [tp-chip][ds-color=provas].ion-activated {
  --background: hsl(var(--med-color-provas-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-provas-3));
  --icon-color: hsl(var(--med-color-provas-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=provas]:hover {
    --background: hsl(var(--med-color-provas-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-provas-3));
    --icon-color: hsl(var(--med-color-provas-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
}
[tp-chip][ds-color=neutral-1] {
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-hover: hsl(var(--med-color-neutral-1));
  --background-active: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-1][active], [tp-chip][ds-color=neutral-1].ion-focused, [tp-chip][ds-color=neutral-1].ion-activated {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-1));
  --icon-color: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-1][active][ds-name=secondary], [tp-chip][ds-color=neutral-1].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-1].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-1]:hover, [tp-chip][ds-color=neutral-1][active]:hover, [tp-chip][ds-color=neutral-1].ion-focused:hover, [tp-chip][ds-color=neutral-1].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-1));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-1));
    --icon-color: hsl(var(--med-color-neutral-1));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-1][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-1][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-1].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-1].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-1));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-2] {
  --color: hsl(var(--med-color-neutral-2));
  --border-color: hsl(var(--med-color-neutral-2));
  --background-hover: hsl(var(--med-color-neutral-2));
  --background-active: hsl(var(--med-color-neutral-2));
  --icon-background: hsl(var(--med-color-neutral-2));
}

[tp-chip][ds-color=neutral-2][active], [tp-chip][ds-color=neutral-2].ion-focused, [tp-chip][ds-color=neutral-2].ion-activated {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-2));
  --icon-color: hsl(var(--med-color-neutral-2));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-2][active][ds-name=secondary], [tp-chip][ds-color=neutral-2].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-2].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-2));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-2]:hover, [tp-chip][ds-color=neutral-2][active]:hover, [tp-chip][ds-color=neutral-2].ion-focused:hover, [tp-chip][ds-color=neutral-2].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-2));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-2));
    --icon-color: hsl(var(--med-color-neutral-2));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-2][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-2][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-2].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-2].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-2));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-3] {
  --color: hsl(var(--med-color-neutral-3));
  --border-color: hsl(var(--med-color-neutral-3));
  --background-hover: hsl(var(--med-color-neutral-3));
  --background-active: hsl(var(--med-color-neutral-3));
  --icon-background: hsl(var(--med-color-neutral-3));
}

[tp-chip][ds-color=neutral-3][active], [tp-chip][ds-color=neutral-3].ion-focused, [tp-chip][ds-color=neutral-3].ion-activated {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-3));
  --icon-color: hsl(var(--med-color-neutral-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-3][active][ds-name=secondary], [tp-chip][ds-color=neutral-3].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-3].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-3));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-3]:hover, [tp-chip][ds-color=neutral-3][active]:hover, [tp-chip][ds-color=neutral-3].ion-focused:hover, [tp-chip][ds-color=neutral-3].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-3));
    --icon-color: hsl(var(--med-color-neutral-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-3][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-3][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-3].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-3].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-3));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-4] {
  --color: hsl(var(--med-color-neutral-4));
  --border-color: hsl(var(--med-color-neutral-4));
  --background-hover: hsl(var(--med-color-neutral-4));
  --background-active: hsl(var(--med-color-neutral-4));
  --icon-background: hsl(var(--med-color-neutral-4));
}

[tp-chip][ds-color=neutral-4][active], [tp-chip][ds-color=neutral-4].ion-focused, [tp-chip][ds-color=neutral-4].ion-activated {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-4));
  --icon-color: hsl(var(--med-color-neutral-4));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-4][active][ds-name=secondary], [tp-chip][ds-color=neutral-4].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-4].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-4));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-4]:hover, [tp-chip][ds-color=neutral-4][active]:hover, [tp-chip][ds-color=neutral-4].ion-focused:hover, [tp-chip][ds-color=neutral-4].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-4));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-4));
    --icon-color: hsl(var(--med-color-neutral-4));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-4][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-4][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-4].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-4].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-4));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-5] {
  --color: hsl(var(--med-color-neutral-5));
  --border-color: hsl(var(--med-color-neutral-5));
  --background-hover: hsl(var(--med-color-neutral-5));
  --background-active: hsl(var(--med-color-neutral-5));
  --icon-background: hsl(var(--med-color-neutral-5));
}

[tp-chip][ds-color=neutral-5][active], [tp-chip][ds-color=neutral-5].ion-focused, [tp-chip][ds-color=neutral-5].ion-activated {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-5));
  --icon-color: hsl(var(--med-color-neutral-5));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-5][active][ds-name=secondary], [tp-chip][ds-color=neutral-5].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-5].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-5));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-5]:hover, [tp-chip][ds-color=neutral-5][active]:hover, [tp-chip][ds-color=neutral-5].ion-focused:hover, [tp-chip][ds-color=neutral-5].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-5));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-5));
    --icon-color: hsl(var(--med-color-neutral-5));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-5][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-5][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-5].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-5].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-5));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-6] {
  --color: hsl(var(--med-color-neutral-6));
  --border-color: hsl(var(--med-color-neutral-6));
  --background-hover: hsl(var(--med-color-neutral-6));
  --background-active: hsl(var(--med-color-neutral-6));
  --icon-background: hsl(var(--med-color-neutral-6));
}

[tp-chip][ds-color=neutral-6][active], [tp-chip][ds-color=neutral-6].ion-focused, [tp-chip][ds-color=neutral-6].ion-activated {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-6));
  --icon-color: hsl(var(--med-color-neutral-6));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-6][active][ds-name=secondary], [tp-chip][ds-color=neutral-6].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-6].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-6));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-6]:hover, [tp-chip][ds-color=neutral-6][active]:hover, [tp-chip][ds-color=neutral-6].ion-focused:hover, [tp-chip][ds-color=neutral-6].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-6));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-6));
    --icon-color: hsl(var(--med-color-neutral-6));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-6][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-6][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-6].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-6].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-6));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-7] {
  --color: hsl(var(--med-color-neutral-7));
  --border-color: hsl(var(--med-color-neutral-7));
  --background-hover: hsl(var(--med-color-neutral-7));
  --background-active: hsl(var(--med-color-neutral-7));
  --icon-background: hsl(var(--med-color-neutral-7));
}

[tp-chip][ds-color=neutral-7][active], [tp-chip][ds-color=neutral-7].ion-focused, [tp-chip][ds-color=neutral-7].ion-activated {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-7));
  --icon-color: hsl(var(--med-color-neutral-7));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-7][active][ds-name=secondary], [tp-chip][ds-color=neutral-7].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-7].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-7));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-7]:hover, [tp-chip][ds-color=neutral-7][active]:hover, [tp-chip][ds-color=neutral-7].ion-focused:hover, [tp-chip][ds-color=neutral-7].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-7));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-7));
    --icon-color: hsl(var(--med-color-neutral-7));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-7][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-7][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-7].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-7].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-7));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-8] {
  --color: hsl(var(--med-color-neutral-8));
  --border-color: hsl(var(--med-color-neutral-8));
  --background-hover: hsl(var(--med-color-neutral-8));
  --background-active: hsl(var(--med-color-neutral-8));
  --icon-background: hsl(var(--med-color-neutral-8));
}

[tp-chip][ds-color=neutral-8][active], [tp-chip][ds-color=neutral-8].ion-focused, [tp-chip][ds-color=neutral-8].ion-activated {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-8));
  --icon-color: hsl(var(--med-color-neutral-8));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-8][active][ds-name=secondary], [tp-chip][ds-color=neutral-8].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-8].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-8));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-8]:hover, [tp-chip][ds-color=neutral-8][active]:hover, [tp-chip][ds-color=neutral-8].ion-focused:hover, [tp-chip][ds-color=neutral-8].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-8));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-8));
    --icon-color: hsl(var(--med-color-neutral-8));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-8][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-8][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-8].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-8].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-8));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-9] {
  --color: hsl(var(--med-color-neutral-9));
  --border-color: hsl(var(--med-color-neutral-9));
  --background-hover: hsl(var(--med-color-neutral-9));
  --background-active: hsl(var(--med-color-neutral-9));
  --icon-background: hsl(var(--med-color-neutral-9));
}

[tp-chip][ds-color=neutral-9][active], [tp-chip][ds-color=neutral-9].ion-focused, [tp-chip][ds-color=neutral-9].ion-activated {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-9));
  --icon-color: hsl(var(--med-color-neutral-9));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-9][active][ds-name=secondary], [tp-chip][ds-color=neutral-9].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-9].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-9));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-9]:hover, [tp-chip][ds-color=neutral-9][active]:hover, [tp-chip][ds-color=neutral-9].ion-focused:hover, [tp-chip][ds-color=neutral-9].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-9));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-9));
    --icon-color: hsl(var(--med-color-neutral-9));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-9][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-9][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-9].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-9].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-9));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-10] {
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-hover: hsl(var(--med-color-neutral-10));
  --background-active: hsl(var(--med-color-neutral-10));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-10][active], [tp-chip][ds-color=neutral-10].ion-focused, [tp-chip][ds-color=neutral-10].ion-activated {
  --background: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-10));
  --icon-color: hsl(var(--med-color-neutral-10));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-10][active][ds-name=secondary], [tp-chip][ds-color=neutral-10].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-10].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-10));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-10]:hover, [tp-chip][ds-color=neutral-10][active]:hover, [tp-chip][ds-color=neutral-10].ion-focused:hover, [tp-chip][ds-color=neutral-10].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-10));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-10));
    --icon-color: hsl(var(--med-color-neutral-10));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-10][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-10][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-10].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-10].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-10));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-15] {
  --color: hsl(var(--med-color-neutral-15));
  --border-color: hsl(var(--med-color-neutral-15));
  --background-hover: hsl(var(--med-color-neutral-15));
  --background-active: hsl(var(--med-color-neutral-15));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-15][active], [tp-chip][ds-color=neutral-15].ion-focused, [tp-chip][ds-color=neutral-15].ion-activated {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-1));
  --icon-color: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-15][active][ds-name=secondary], [tp-chip][ds-color=neutral-15].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-15].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-1));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-15]:hover, [tp-chip][ds-color=neutral-15][active]:hover, [tp-chip][ds-color=neutral-15].ion-focused:hover, [tp-chip][ds-color=neutral-15].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-1));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-1));
    --icon-color: hsl(var(--med-color-neutral-1));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-15][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-15][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-15].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-15].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-1));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-25] {
  --color: hsl(var(--med-color-neutral-25));
  --border-color: hsl(var(--med-color-neutral-25));
  --background-hover: hsl(var(--med-color-neutral-25));
  --background-active: hsl(var(--med-color-neutral-25));
  --icon-background: hsl(var(--med-color-neutral-2));
}

[tp-chip][ds-color=neutral-25][active], [tp-chip][ds-color=neutral-25].ion-focused, [tp-chip][ds-color=neutral-25].ion-activated {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-2));
  --icon-color: hsl(var(--med-color-neutral-2));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-25][active][ds-name=secondary], [tp-chip][ds-color=neutral-25].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-25].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-2));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-25]:hover, [tp-chip][ds-color=neutral-25][active]:hover, [tp-chip][ds-color=neutral-25].ion-focused:hover, [tp-chip][ds-color=neutral-25].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-2));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-2));
    --icon-color: hsl(var(--med-color-neutral-2));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-25][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-25][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-25].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-25].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-2));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-35] {
  --color: hsl(var(--med-color-neutral-35));
  --border-color: hsl(var(--med-color-neutral-35));
  --background-hover: hsl(var(--med-color-neutral-35));
  --background-active: hsl(var(--med-color-neutral-35));
  --icon-background: hsl(var(--med-color-neutral-3));
}

[tp-chip][ds-color=neutral-35][active], [tp-chip][ds-color=neutral-35].ion-focused, [tp-chip][ds-color=neutral-35].ion-activated {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-3));
  --icon-color: hsl(var(--med-color-neutral-3));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-35][active][ds-name=secondary], [tp-chip][ds-color=neutral-35].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-35].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-3));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-35]:hover, [tp-chip][ds-color=neutral-35][active]:hover, [tp-chip][ds-color=neutral-35].ion-focused:hover, [tp-chip][ds-color=neutral-35].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-3));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-3));
    --icon-color: hsl(var(--med-color-neutral-3));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-35][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-35][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-35].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-35].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-3));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-45] {
  --color: hsl(var(--med-color-neutral-45));
  --border-color: hsl(var(--med-color-neutral-45));
  --background-hover: hsl(var(--med-color-neutral-45));
  --background-active: hsl(var(--med-color-neutral-45));
  --icon-background: hsl(var(--med-color-neutral-4));
}

[tp-chip][ds-color=neutral-45][active], [tp-chip][ds-color=neutral-45].ion-focused, [tp-chip][ds-color=neutral-45].ion-activated {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-4));
  --icon-color: hsl(var(--med-color-neutral-4));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-45][active][ds-name=secondary], [tp-chip][ds-color=neutral-45].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-45].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-4));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-45]:hover, [tp-chip][ds-color=neutral-45][active]:hover, [tp-chip][ds-color=neutral-45].ion-focused:hover, [tp-chip][ds-color=neutral-45].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-4));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-4));
    --icon-color: hsl(var(--med-color-neutral-4));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-45][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-45][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-45].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-45].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-4));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-55] {
  --color: hsl(var(--med-color-neutral-55));
  --border-color: hsl(var(--med-color-neutral-55));
  --background-hover: hsl(var(--med-color-neutral-55));
  --background-active: hsl(var(--med-color-neutral-55));
  --icon-background: hsl(var(--med-color-neutral-5));
}

[tp-chip][ds-color=neutral-55][active], [tp-chip][ds-color=neutral-55].ion-focused, [tp-chip][ds-color=neutral-55].ion-activated {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-5));
  --icon-color: hsl(var(--med-color-neutral-5));
  --icon-background: hsl(var(--med-color-neutral-10));
}

[tp-chip][ds-color=neutral-55][active][ds-name=secondary], [tp-chip][ds-color=neutral-55].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-55].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-5));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-55]:hover, [tp-chip][ds-color=neutral-55][active]:hover, [tp-chip][ds-color=neutral-55].ion-focused:hover, [tp-chip][ds-color=neutral-55].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-5));
    --color: hsl(var(--med-color-neutral-10));
    --border-color: hsl(var(--med-color-neutral-5));
    --icon-color: hsl(var(--med-color-neutral-5));
    --icon-background: hsl(var(--med-color-neutral-10));
  }
  [tp-chip][ds-color=neutral-55][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-55][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-55].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-55].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-5));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-65] {
  --color: hsl(var(--med-color-neutral-65));
  --border-color: hsl(var(--med-color-neutral-65));
  --background-hover: hsl(var(--med-color-neutral-65));
  --background-active: hsl(var(--med-color-neutral-65));
  --icon-background: hsl(var(--med-color-neutral-6));
}

[tp-chip][ds-color=neutral-65][active], [tp-chip][ds-color=neutral-65].ion-focused, [tp-chip][ds-color=neutral-65].ion-activated {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-6));
  --icon-color: hsl(var(--med-color-neutral-6));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-65][active][ds-name=secondary], [tp-chip][ds-color=neutral-65].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-65].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-6));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-65]:hover, [tp-chip][ds-color=neutral-65][active]:hover, [tp-chip][ds-color=neutral-65].ion-focused:hover, [tp-chip][ds-color=neutral-65].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-6));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-6));
    --icon-color: hsl(var(--med-color-neutral-6));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-65][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-65][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-65].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-65].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-6));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-75] {
  --color: hsl(var(--med-color-neutral-75));
  --border-color: hsl(var(--med-color-neutral-75));
  --background-hover: hsl(var(--med-color-neutral-75));
  --background-active: hsl(var(--med-color-neutral-75));
  --icon-background: hsl(var(--med-color-neutral-7));
}

[tp-chip][ds-color=neutral-75][active], [tp-chip][ds-color=neutral-75].ion-focused, [tp-chip][ds-color=neutral-75].ion-activated {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-7));
  --icon-color: hsl(var(--med-color-neutral-7));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-75][active][ds-name=secondary], [tp-chip][ds-color=neutral-75].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-75].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-7));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-75]:hover, [tp-chip][ds-color=neutral-75][active]:hover, [tp-chip][ds-color=neutral-75].ion-focused:hover, [tp-chip][ds-color=neutral-75].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-7));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-7));
    --icon-color: hsl(var(--med-color-neutral-7));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-75][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-75][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-75].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-75].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-7));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-85] {
  --color: hsl(var(--med-color-neutral-85));
  --border-color: hsl(var(--med-color-neutral-85));
  --background-hover: hsl(var(--med-color-neutral-85));
  --background-active: hsl(var(--med-color-neutral-85));
  --icon-background: hsl(var(--med-color-neutral-8));
}

[tp-chip][ds-color=neutral-85][active], [tp-chip][ds-color=neutral-85].ion-focused, [tp-chip][ds-color=neutral-85].ion-activated {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-8));
  --icon-color: hsl(var(--med-color-neutral-8));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-85][active][ds-name=secondary], [tp-chip][ds-color=neutral-85].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-85].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-8));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-85]:hover, [tp-chip][ds-color=neutral-85][active]:hover, [tp-chip][ds-color=neutral-85].ion-focused:hover, [tp-chip][ds-color=neutral-85].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-8));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-8));
    --icon-color: hsl(var(--med-color-neutral-8));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-85][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-85][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-85].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-85].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-8));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=neutral-95] {
  --color: hsl(var(--med-color-neutral-95));
  --border-color: hsl(var(--med-color-neutral-95));
  --background-hover: hsl(var(--med-color-neutral-95));
  --background-active: hsl(var(--med-color-neutral-95));
  --icon-background: hsl(var(--med-color-neutral-9));
}

[tp-chip][ds-color=neutral-95][active], [tp-chip][ds-color=neutral-95].ion-focused, [tp-chip][ds-color=neutral-95].ion-activated {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-9));
  --icon-color: hsl(var(--med-color-neutral-9));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=neutral-95][active][ds-name=secondary], [tp-chip][ds-color=neutral-95].ion-focused[ds-name=secondary], [tp-chip][ds-color=neutral-95].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-neutral-9));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=neutral-95]:hover, [tp-chip][ds-color=neutral-95][active]:hover, [tp-chip][ds-color=neutral-95].ion-focused:hover, [tp-chip][ds-color=neutral-95].ion-activated:hover {
    --background: hsl(var(--med-color-neutral-9));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-neutral-9));
    --icon-color: hsl(var(--med-color-neutral-9));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=neutral-95][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-95][active][ds-name=secondary]:hover, [tp-chip][ds-color=neutral-95].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=neutral-95].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-neutral-9));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=fb-attention] {
  --color: hsl(var(--med-color-fb-attention));
  --border-color: hsl(var(--med-color-fb-attention));
  --background-hover: hsl(var(--med-color-fb-attention));
  --background-active: hsl(var(--med-color-fb-attention));
  --icon-background: hsl(var(--med-color-fb-attention));
}

[tp-chip][ds-color=fb-attention][active], [tp-chip][ds-color=fb-attention].ion-focused, [tp-chip][ds-color=fb-attention].ion-activated {
  --background: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-fb-attention));
  --icon-color: hsl(var(--med-color-fb-attention));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=fb-attention][active][ds-name=secondary], [tp-chip][ds-color=fb-attention].ion-focused[ds-name=secondary], [tp-chip][ds-color=fb-attention].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-fb-attention));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=fb-attention]:hover, [tp-chip][ds-color=fb-attention][active]:hover, [tp-chip][ds-color=fb-attention].ion-focused:hover, [tp-chip][ds-color=fb-attention].ion-activated:hover {
    --background: hsl(var(--med-color-fb-attention));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-fb-attention));
    --icon-color: hsl(var(--med-color-fb-attention));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=fb-attention][ds-name=secondary]:hover, [tp-chip][ds-color=fb-attention][active][ds-name=secondary]:hover, [tp-chip][ds-color=fb-attention].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=fb-attention].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-fb-attention));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=fb-caution] {
  --color: hsl(var(--med-color-fb-caution));
  --border-color: hsl(var(--med-color-fb-caution));
  --background-hover: hsl(var(--med-color-fb-caution));
  --background-active: hsl(var(--med-color-fb-caution));
  --icon-background: hsl(var(--med-color-fb-caution));
}

[tp-chip][ds-color=fb-caution][active], [tp-chip][ds-color=fb-caution].ion-focused, [tp-chip][ds-color=fb-caution].ion-activated {
  --background: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-fb-caution));
  --icon-color: hsl(var(--med-color-fb-caution));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=fb-caution][active][ds-name=secondary], [tp-chip][ds-color=fb-caution].ion-focused[ds-name=secondary], [tp-chip][ds-color=fb-caution].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-fb-caution));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=fb-caution]:hover, [tp-chip][ds-color=fb-caution][active]:hover, [tp-chip][ds-color=fb-caution].ion-focused:hover, [tp-chip][ds-color=fb-caution].ion-activated:hover {
    --background: hsl(var(--med-color-fb-caution));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-fb-caution));
    --icon-color: hsl(var(--med-color-fb-caution));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=fb-caution][ds-name=secondary]:hover, [tp-chip][ds-color=fb-caution][active][ds-name=secondary]:hover, [tp-chip][ds-color=fb-caution].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=fb-caution].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-fb-caution));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=fb-warning] {
  --color: hsl(var(--med-color-fb-warning));
  --border-color: hsl(var(--med-color-fb-warning));
  --background-hover: hsl(var(--med-color-fb-warning));
  --background-active: hsl(var(--med-color-fb-warning));
  --icon-background: hsl(var(--med-color-fb-warning));
}

[tp-chip][ds-color=fb-warning][active], [tp-chip][ds-color=fb-warning].ion-focused, [tp-chip][ds-color=fb-warning].ion-activated {
  --background: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-fb-warning));
  --icon-color: hsl(var(--med-color-fb-warning));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=fb-warning][active][ds-name=secondary], [tp-chip][ds-color=fb-warning].ion-focused[ds-name=secondary], [tp-chip][ds-color=fb-warning].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-fb-warning));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=fb-warning]:hover, [tp-chip][ds-color=fb-warning][active]:hover, [tp-chip][ds-color=fb-warning].ion-focused:hover, [tp-chip][ds-color=fb-warning].ion-activated:hover {
    --background: hsl(var(--med-color-fb-warning));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-fb-warning));
    --icon-color: hsl(var(--med-color-fb-warning));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=fb-warning][ds-name=secondary]:hover, [tp-chip][ds-color=fb-warning][active][ds-name=secondary]:hover, [tp-chip][ds-color=fb-warning].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=fb-warning].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-fb-warning));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-chip][ds-color=fb-success] {
  --color: hsl(var(--med-color-fb-success));
  --border-color: hsl(var(--med-color-fb-success));
  --background-hover: hsl(var(--med-color-fb-success));
  --background-active: hsl(var(--med-color-fb-success));
  --icon-background: hsl(var(--med-color-fb-success));
}

[tp-chip][ds-color=fb-success][active], [tp-chip][ds-color=fb-success].ion-focused, [tp-chip][ds-color=fb-success].ion-activated {
  --background: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-fb-success));
  --icon-color: hsl(var(--med-color-fb-success));
  --icon-background: hsl(var(--med-color-neutral-1));
}

[tp-chip][ds-color=fb-success][active][ds-name=secondary], [tp-chip][ds-color=fb-success].ion-focused[ds-name=secondary], [tp-chip][ds-color=fb-success].ion-activated[ds-name=secondary] {
  --icon-color: hsl(var(--med-color-fb-success));
  --icon-background: hsl(var(--med-color-neutral-2));
}

@media (any-hover: hover) {
  [tp-chip][ds-color=fb-success]:hover, [tp-chip][ds-color=fb-success][active]:hover, [tp-chip][ds-color=fb-success].ion-focused:hover, [tp-chip][ds-color=fb-success].ion-activated:hover {
    --background: hsl(var(--med-color-fb-success));
    --color: hsl(var(--med-color-neutral-1));
    --border-color: hsl(var(--med-color-fb-success));
    --icon-color: hsl(var(--med-color-fb-success));
    --icon-background: hsl(var(--med-color-neutral-1));
  }
  [tp-chip][ds-color=fb-success][ds-name=secondary]:hover, [tp-chip][ds-color=fb-success][active][ds-name=secondary]:hover, [tp-chip][ds-color=fb-success].ion-focused[ds-name=secondary]:hover, [tp-chip][ds-color=fb-success].ion-activated[ds-name=secondary]:hover {
    --icon-color: hsl(var(--med-color-fb-success));
    --icon-background: hsl(var(--med-color-neutral-2));
  }
}
[tp-container-input] {
  --border-container: 1px solid transparent;
  border: var(--border-container);
}

[tp-container-input] [tp-input]:not(:first-child) {
  margin: 0;
}

[tp-container-input] [tp-button] {
  margin: 0 8px;
}

[tp-container-input][state=attention] {
  --border-container: 1px solid hsl(var(--med-color-fb-attention));
}

[tp-container-input][state=caution] {
  --border-container: 1px solid hsl(var(--med-color-fb-caution));
}

[tp-container-input][state=warning] {
  --border-container: 1px solid hsl(var(--med-color-fb-warning));
}

[tp-container-input][state=success] {
  --border-container: 1px solid hsl(var(--med-color-fb-success));
}

[tp-container-input][ds-color=neutral-1] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-1] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-1] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-1] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-2] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-2] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-2] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-2] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-3] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-3] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-3] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-3] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-4] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-4] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-4] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-4] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-5] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-5] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-5] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-5] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-6] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-6] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-6] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-6] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-7] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-7] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-7] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-7] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-8] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-8] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-8] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-8] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-9] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-9] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-9] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-9] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-10] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-10] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-10] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-10] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-15] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-15] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-15] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-15] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-25] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-25] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-25] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-25] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-35] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-35] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-35] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-35] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-45] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-45] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-45] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-45] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-55] [tp-button] {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-55] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-55] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-55] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-65] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-65] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-65] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-65] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-75] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-75] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-75] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-75] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-85] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-85] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-85] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-85] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-95] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-95] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=neutral-95] [tp-button]:hover .med-icon, [tp-container-input][ds-color=neutral-95] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-attention] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-attention] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-attention] [tp-button]:hover .med-icon, [tp-container-input][ds-color=fb-attention] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-caution] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-caution] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-caution] [tp-button]:hover .med-icon, [tp-container-input][ds-color=fb-caution] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-warning] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-warning] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-warning] [tp-button]:hover .med-icon, [tp-container-input][ds-color=fb-warning] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-success] [tp-button] {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-success] [tp-button] .med-icon {
  stroke: var(--color);
}

[tp-container-input][ds-color=fb-success] [tp-button]:hover .med-icon, [tp-container-input][ds-color=fb-success] [tp-button]:focus .med-icon {
  stroke: var(--color);
}

[tp-container-input] .med-icon--alerta {
  min-height: 24px;
  min-width: 24px;
}

[tp-container-input] .med-icon--alerta.med-icon--start {
  margin: 0 0 0 8px;
}

[tp-container-input] .med-icon--alerta.med-icon--end {
  margin: 0 8px 0 0;
}

[tp-container-input][state=attention] .med-icon--alerta {
  stroke: hsl(var(--med-color-fb-attention));
}

[tp-container-input][state=caution] .med-icon--alerta {
  stroke: hsl(var(--med-color-fb-caution));
}

[tp-container-input][state=warning] .med-icon--alerta {
  stroke: hsl(var(--med-color-fb-warning));
}

[tp-container-input][state=success] .med-icon--alerta {
  stroke: hsl(var(--med-color-fb-success));
}

[tp-container-input] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-5));
  --stroke: hsl(var(--med-color-neutral-6));
  font-size: 14px;
  line-height: 16px;
  border-radius: 8px;
  height: 40px;
  background: var(--background);
  color: var(--color);
  margin-top: 8px;
  display: flex;
  align-items: center;
}

[tp-container-input] [tp-input] {
  --margin-left: 16px;
  padding: 0;
  height: auto;
  border-radius: 0;
  margin-left: var(--margin-left);
}

[tp-container-input] .med-icon {
  height: 24px;
  width: 24px;
  stroke: var(--stroke);
  margin: 0 8px 0 8px;
}

[tp-container-input] .med-icon ~ [tp-input] {
  --margin-left: 0;
}

[tp-label] ~ [tp-container-input] {
  margin-top: 8px;
}

[tp-container-input][ds-name=secondary] {
  --background: hsl(var(--med-color-neutral-3));
}

[tp-container-input][disabled] {
  opacity: 0.4;
}

[tp-container-input][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-input][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-input][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-input] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --padding-end: 16px;
  --padding-start: 16px;
  --padding-bottom: 12px;
  --padding-top: 12px;
  --placeholder-color: hsl(var(--med-color-neutral-5));
  --border: 1px solid transparent;
  border: var(--border);
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  padding-left: var(--padding-start);
  padding-right: var(--padding-end);
  font-size: 14px;
  line-height: 16px;
  border-radius: 8px;
  height: 40px;
  width: 100%;
  background: var(--background);
  color: var(--color);
}

[tp-input]::placeholder {
  color: var(--placeholder-color);
}

[tp-input]:focus {
  outline: none;
}

[tp-label] ~ [tp-input] {
  margin-top: 8px;
}

[tp-input][ds-name=secondary] {
  --background: hsl(var(--med-color-neutral-3));
}

[tp-input][disabled] {
  opacity: 0.4;
}

[tp-input][state=attention] {
  --border: 1px solid hsl(var(--med-color-fb-attention));
}

[tp-input][state=caution] {
  --border: 1px solid hsl(var(--med-color-fb-caution));
}

[tp-input][state=warning] {
  --border: 1px solid hsl(var(--med-color-fb-warning));
}

[tp-input][state=success] {
  --border: 1px solid hsl(var(--med-color-fb-success));
}

[tp-input][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=brand] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=aula] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=material] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=questoes] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=revalida] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=provas] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-1] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-2] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-3] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-4] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-5] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-6] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-7] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-8] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-9] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-10] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-15] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-25] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-35] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-45] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
  --color: hsl(var(--med-color-neutral-10));
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-55] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-10));
}

[tp-input][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-65] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-75] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-85] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=neutral-95] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-attention] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-caution] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-warning] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-neutral-1));
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-input][ds-color=fb-success] [tp-input]::placeholder {
  --placeholder-color: hsl(var(--med-color-neutral-1));
}

[tp-label][tp-input-helper] {
  margin-top: 8px;
}

[tp-item] {
  --background: transparent;
  --padding-top: 16px;
  --padding-end: 16px;
  --padding-bottom: 16px;
  --padding-start: 16px;
  --min-height: auto;
  --color: hsl(var(--med-color-neutral-10));
  display: flex;
  align-items: center;
  background: var(--background);
  padding-top: var(--padding-top);
  padding-right: var(--padding-end);
  padding-bottom: var(--padding-bottom);
  padding-left: var(--padding-start);
  min-height: var(--min-height);
  color: var(--color);
}

[tp-item] ion-icon:last-child {
  margin: 0 0 0 auto !important;
}

[tp-item] button:last-child {
  margin: 0 0 0 auto !important;
}

[tp-item][radius=s00] {
  border-radius: 0;
}

[tp-item][radius=s02] {
  border-radius: 2px;
}

[tp-item][radius=s04] {
  border-radius: 4px;
}

[tp-item][radius=s08] {
  border-radius: 8px;
}

[tp-item][spacing-v=s00] {
  --padding-bottom: 0;
  --padding-top: 0;
}

[tp-item][spacing-h=s00] {
  --padding-end: 0;
  --padding-start: 0;
}

[tp-item][spacing-v=s02] {
  --padding-bottom: 2px;
  --padding-top: 2px;
}

[tp-item][spacing-h=s02] {
  --padding-end: 2px;
  --padding-start: 2px;
}

[tp-item][spacing-v=s04] {
  --padding-bottom: 4px;
  --padding-top: 4px;
}

[tp-item][spacing-h=s04] {
  --padding-end: 4px;
  --padding-start: 4px;
}

[tp-item][spacing-v=s08] {
  --padding-bottom: 8px;
  --padding-top: 8px;
}

[tp-item][spacing-h=s08] {
  --padding-end: 8px;
  --padding-start: 8px;
}

[tp-item][spacing-v=s12] {
  --padding-bottom: 12px;
  --padding-top: 12px;
}

[tp-item][spacing-h=s12] {
  --padding-end: 12px;
  --padding-start: 12px;
}

[tp-item][spacing-v=s16] {
  --padding-bottom: 16px;
  --padding-top: 16px;
}

[tp-item][spacing-h=s16] {
  --padding-end: 16px;
  --padding-start: 16px;
}

[tp-item][spacing-v=s20] {
  --padding-bottom: 20px;
  --padding-top: 20px;
}

[tp-item][spacing-h=s20] {
  --padding-end: 20px;
  --padding-start: 20px;
}

[tp-item][spacing-v=s24] {
  --padding-bottom: 24px;
  --padding-top: 24px;
}

[tp-item][spacing-h=s24] {
  --padding-end: 24px;
  --padding-start: 24px;
}

[tp-item] label {
  --color: hsl(var(--med-color-neutral-10));
  font-weight: 400;
  font-size: 14px;
  line-height: 14px;
  margin: 0;
  text-overflow: initial;
  white-space: normal;
  overflow: unset;
  color: var(--color);
}

[tp-item] ion-icon {
  font-size: 24px;
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item] [tp-checkbox]:first-child,
[tp-item] [tp-radio]:first-child,
[tp-item] [tp-toggle]:first-child,
[tp-item] ion-icon:first-child,
[tp-item] [tp-button]:first-child {
  margin: 0 8px 0 0;
}

[tp-item] [tp-checkbox]:last-child,
[tp-item] [tp-radio]:last-child,
[tp-item] [tp-toggle]:last-child,
[tp-item] ion-icon:last-child,
[tp-item] [tp-button]:last-child {
  margin: 0 0 0 8px;
}

[tp-item] [tp-button] ion-icon,
[tp-item] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s00] [tp-checkbox]:first-child,
[tp-item][gap=s00] [tp-radio]:first-child,
[tp-item][gap=s00] [tp-toggle]:first-child,
[tp-item][gap=s00] ion-icon:first-child,
[tp-item][gap=s00] [tp-button]:first-child {
  margin: 0 0 0 0;
}

[tp-item][gap=s00] [tp-checkbox]:last-child,
[tp-item][gap=s00] [tp-radio]:last-child,
[tp-item][gap=s00] [tp-toggle]:last-child,
[tp-item][gap=s00] ion-icon:last-child,
[tp-item][gap=s00] [tp-button]:last-child {
  margin: 0 0 0 0;
}

[tp-item][gap=s00] [tp-button] ion-icon,
[tp-item][gap=s00] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s02] [tp-checkbox]:first-child,
[tp-item][gap=s02] [tp-radio]:first-child,
[tp-item][gap=s02] [tp-toggle]:first-child,
[tp-item][gap=s02] ion-icon:first-child,
[tp-item][gap=s02] [tp-button]:first-child {
  margin: 0 2px 0 0;
}

[tp-item][gap=s02] [tp-checkbox]:last-child,
[tp-item][gap=s02] [tp-radio]:last-child,
[tp-item][gap=s02] [tp-toggle]:last-child,
[tp-item][gap=s02] ion-icon:last-child,
[tp-item][gap=s02] [tp-button]:last-child {
  margin: 0 0 0 2px;
}

[tp-item][gap=s02] [tp-button] ion-icon,
[tp-item][gap=s02] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s04] [tp-checkbox]:first-child,
[tp-item][gap=s04] [tp-radio]:first-child,
[tp-item][gap=s04] [tp-toggle]:first-child,
[tp-item][gap=s04] ion-icon:first-child,
[tp-item][gap=s04] [tp-button]:first-child {
  margin: 0 4px 0 0;
}

[tp-item][gap=s04] [tp-checkbox]:last-child,
[tp-item][gap=s04] [tp-radio]:last-child,
[tp-item][gap=s04] [tp-toggle]:last-child,
[tp-item][gap=s04] ion-icon:last-child,
[tp-item][gap=s04] [tp-button]:last-child {
  margin: 0 0 0 4px;
}

[tp-item][gap=s04] [tp-button] ion-icon,
[tp-item][gap=s04] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s08] [tp-checkbox]:first-child,
[tp-item][gap=s08] [tp-radio]:first-child,
[tp-item][gap=s08] [tp-toggle]:first-child,
[tp-item][gap=s08] ion-icon:first-child,
[tp-item][gap=s08] [tp-button]:first-child {
  margin: 0 8px 0 0;
}

[tp-item][gap=s08] [tp-checkbox]:last-child,
[tp-item][gap=s08] [tp-radio]:last-child,
[tp-item][gap=s08] [tp-toggle]:last-child,
[tp-item][gap=s08] ion-icon:last-child,
[tp-item][gap=s08] [tp-button]:last-child {
  margin: 0 0 0 8px;
}

[tp-item][gap=s08] [tp-button] ion-icon,
[tp-item][gap=s08] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s12] [tp-checkbox]:first-child,
[tp-item][gap=s12] [tp-radio]:first-child,
[tp-item][gap=s12] [tp-toggle]:first-child,
[tp-item][gap=s12] ion-icon:first-child,
[tp-item][gap=s12] [tp-button]:first-child {
  margin: 0 12px 0 0;
}

[tp-item][gap=s12] [tp-checkbox]:last-child,
[tp-item][gap=s12] [tp-radio]:last-child,
[tp-item][gap=s12] [tp-toggle]:last-child,
[tp-item][gap=s12] ion-icon:last-child,
[tp-item][gap=s12] [tp-button]:last-child {
  margin: 0 0 0 12px;
}

[tp-item][gap=s12] [tp-button] ion-icon,
[tp-item][gap=s12] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s16] [tp-checkbox]:first-child,
[tp-item][gap=s16] [tp-radio]:first-child,
[tp-item][gap=s16] [tp-toggle]:first-child,
[tp-item][gap=s16] ion-icon:first-child,
[tp-item][gap=s16] [tp-button]:first-child {
  margin: 0 16px 0 0;
}

[tp-item][gap=s16] [tp-checkbox]:last-child,
[tp-item][gap=s16] [tp-radio]:last-child,
[tp-item][gap=s16] [tp-toggle]:last-child,
[tp-item][gap=s16] ion-icon:last-child,
[tp-item][gap=s16] [tp-button]:last-child {
  margin: 0 0 0 16px;
}

[tp-item][gap=s16] [tp-button] ion-icon,
[tp-item][gap=s16] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s20] [tp-checkbox]:first-child,
[tp-item][gap=s20] [tp-radio]:first-child,
[tp-item][gap=s20] [tp-toggle]:first-child,
[tp-item][gap=s20] ion-icon:first-child,
[tp-item][gap=s20] [tp-button]:first-child {
  margin: 0 20px 0 0;
}

[tp-item][gap=s20] [tp-checkbox]:last-child,
[tp-item][gap=s20] [tp-radio]:last-child,
[tp-item][gap=s20] [tp-toggle]:last-child,
[tp-item][gap=s20] ion-icon:last-child,
[tp-item][gap=s20] [tp-button]:last-child {
  margin: 0 0 0 20px;
}

[tp-item][gap=s20] [tp-button] ion-icon,
[tp-item][gap=s20] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][gap=s24] [tp-checkbox]:first-child,
[tp-item][gap=s24] [tp-radio]:first-child,
[tp-item][gap=s24] [tp-toggle]:first-child,
[tp-item][gap=s24] ion-icon:first-child,
[tp-item][gap=s24] [tp-button]:first-child {
  margin: 0 24px 0 0;
}

[tp-item][gap=s24] [tp-checkbox]:last-child,
[tp-item][gap=s24] [tp-radio]:last-child,
[tp-item][gap=s24] [tp-toggle]:last-child,
[tp-item][gap=s24] ion-icon:last-child,
[tp-item][gap=s24] [tp-button]:last-child {
  margin: 0 0 0 24px;
}

[tp-item][gap=s24] [tp-button] ion-icon,
[tp-item][gap=s24] [tp-container-checkbox] ion-icon {
  margin: 0;
}

[tp-item][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
}

[tp-item][ds-color=brand] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=brand] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=brand] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=brand] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-brand-3));
}

[tp-item][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
}

[tp-item][ds-color=aula] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=aula] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=aula] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=aula] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-aula-3));
}

[tp-item][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
}

[tp-item][ds-color=material] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=material] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=material] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=material] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-material-3));
}

[tp-item][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
}

[tp-item][ds-color=questoes] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=questoes] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=questoes] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=questoes] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-questoes-3));
}

[tp-item][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
}

[tp-item][ds-color=revalida] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=revalida] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=revalida] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=revalida] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-revalida-3));
}

[tp-item][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
}

[tp-item][ds-color=provas] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-container-radio] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-container-checkbox] + [tp-label] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-container-checkbox] + [tp-label]:hover, [tp-item][ds-color=provas] [tp-container-checkbox] + [tp-label]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-container-checkbox] .med-icon {
  stroke: transparent;
}

[tp-item][ds-color=provas] [tp-checkbox]:checked + [tp-label] .med-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-toggle-slider] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=provas] [tp-toggle-slider]::before {
  --background-round: hsl(var(--med-color-provas-3));
}

[tp-item][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-1] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-1] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
}

[tp-item][ds-color=neutral-2] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-2] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
}

[tp-item][ds-color=neutral-3] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-3] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
}

[tp-item][ds-color=neutral-4] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-4] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
}

[tp-item][ds-color=neutral-5] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-5] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
}

[tp-item][ds-color=neutral-6] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-6] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
}

[tp-item][ds-color=neutral-7] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-7] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
}

[tp-item][ds-color=neutral-8] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-8] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
}

[tp-item][ds-color=neutral-9] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-9] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-10] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-10] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
}

[tp-item][ds-color=neutral-15] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-15] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
}

[tp-item][ds-color=neutral-25] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-25] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
}

[tp-item][ds-color=neutral-35] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-35] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
}

[tp-item][ds-color=neutral-45] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-45] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
}

[tp-item][ds-color=neutral-55] label {
  --color: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-55] ion-icon {
  stroke: hsl(var(--med-color-neutral-10));
}

[tp-item][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
}

[tp-item][ds-color=neutral-65] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-65] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
}

[tp-item][ds-color=neutral-75] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-75] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
}

[tp-item][ds-color=neutral-85] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-85] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
}

[tp-item][ds-color=neutral-95] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=neutral-95] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
}

[tp-item][ds-color=fb-attention] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-attention] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
}

[tp-item][ds-color=fb-caution] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-caution] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
}

[tp-item][ds-color=fb-warning] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-warning] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
}

[tp-item][ds-color=fb-success] label {
  --color: hsl(var(--med-color-neutral-1));
}

[tp-item][ds-color=fb-success] ion-icon {
  stroke: hsl(var(--med-color-neutral-1));
}

[tp-label] {
  color: hsl(var(--med-color-neutral-10));
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
  margin: 0;
  padding: 0;
}

[tp-label][token=h48] {
  font-size: 48px;
  font-weight: 600;
  line-height: 48px;
}

[tp-label][token=h48x] {
  font-size: 48px;
  font-weight: 600;
  line-height: 64px;
}

[tp-label][token=h32] {
  font-size: 32px;
  font-weight: 600;
  line-height: 32px;
}

[tp-label][token=h32x] {
  font-size: 32px;
  font-weight: 600;
  line-height: 40px;
}

[tp-label][token=h24] {
  font-size: 24px;
  font-weight: 600;
  line-height: 24px;
}

[tp-label][token=h24x] {
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
}

[tp-label][token=h20] {
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
}

[tp-label][token=h20x] {
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

[tp-label][token=p18x] {
  font-size: 18px;
  font-weight: 400;
  line-height: 32px;
}

[tp-label][token=p18xb] {
  font-size: 18px;
  font-weight: 600;
  line-height: 32px;
}

[tp-label][token=p16] {
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}

[tp-label][token=p16b] {
  font-size: 16px;
  font-weight: 600;
  line-height: 16px;
}

[tp-label][token=p16x] {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}

[tp-label][token=p16xb] {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
}

[tp-label][token=p14] {
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
}

[tp-label][token=p14b] {
  font-size: 14px;
  font-weight: 600;
  line-height: 16px;
}

[tp-label][token=p14x] {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

[tp-label][token=p14xb] {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

[tp-label][token=p12] {
  font-size: 12px;
  font-weight: 400;
  line-height: 12px;
}

[tp-label][token=p12b] {
  font-size: 12px;
  font-weight: 600;
  line-height: 12px;
}

[tp-label][token=p12x] {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
}

[tp-label][token=p12xb] {
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
}

[tp-label][token=p10] {
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
}

[tp-label][token=p10b] {
  font-size: 10px;
  font-weight: 600;
  line-height: 12px;
}

[tp-label][ds-color=brand] {
  color: hsl(var(--med-color-brand-3));
}

[tp-label][ds-color=aula] {
  color: hsl(var(--med-color-aula-3));
}

[tp-label][ds-color=material] {
  color: hsl(var(--med-color-material-3));
}

[tp-label][ds-color=questoes] {
  color: hsl(var(--med-color-questoes-3));
}

[tp-label][ds-color=revalida] {
  color: hsl(var(--med-color-revalida-3));
}

[tp-label][ds-color=provas] {
  color: hsl(var(--med-color-provas-3));
}

[tp-label][ds-color=neutral-1] {
  color: hsl(var(--med-color-neutral-1));
}

[tp-label][ds-color=neutral-2] {
  color: hsl(var(--med-color-neutral-2));
}

[tp-label][ds-color=neutral-3] {
  color: hsl(var(--med-color-neutral-3));
}

[tp-label][ds-color=neutral-4] {
  color: hsl(var(--med-color-neutral-4));
}

[tp-label][ds-color=neutral-5] {
  color: hsl(var(--med-color-neutral-5));
}

[tp-label][ds-color=neutral-6] {
  color: hsl(var(--med-color-neutral-6));
}

[tp-label][ds-color=neutral-7] {
  color: hsl(var(--med-color-neutral-7));
}

[tp-label][ds-color=neutral-8] {
  color: hsl(var(--med-color-neutral-8));
}

[tp-label][ds-color=neutral-9] {
  color: hsl(var(--med-color-neutral-9));
}

[tp-label][ds-color=neutral-10] {
  color: hsl(var(--med-color-neutral-10));
}

[tp-label][ds-color=neutral-15] {
  color: hsl(var(--med-color-neutral-15));
}

[tp-label][ds-color=neutral-25] {
  color: hsl(var(--med-color-neutral-25));
}

[tp-label][ds-color=neutral-35] {
  color: hsl(var(--med-color-neutral-35));
}

[tp-label][ds-color=neutral-45] {
  color: hsl(var(--med-color-neutral-45));
}

[tp-label][ds-color=neutral-55] {
  color: hsl(var(--med-color-neutral-55));
}

[tp-label][ds-color=neutral-65] {
  color: hsl(var(--med-color-neutral-65));
}

[tp-label][ds-color=neutral-75] {
  color: hsl(var(--med-color-neutral-75));
}

[tp-label][ds-color=neutral-85] {
  color: hsl(var(--med-color-neutral-85));
}

[tp-label][ds-color=neutral-95] {
  color: hsl(var(--med-color-neutral-95));
}

[tp-label][ds-color=fb-attention] {
  color: hsl(var(--med-color-fb-attention));
}

[tp-label][ds-color=fb-caution] {
  color: hsl(var(--med-color-fb-caution));
}

[tp-label][ds-color=fb-warning] {
  color: hsl(var(--med-color-fb-warning));
}

[tp-label][ds-color=fb-success] {
  color: hsl(var(--med-color-fb-success));
}

[tp-loader] {
  --stroke: hsl(var(--med-color-neutral-10));
  height: 94px;
  width: 94px;
  display: flex;
  align-items: center;
  justify-content: center;
}

[tp-loader] [tp-loader-svg] {
  stroke: var(--stroke);
  height: 40px;
  width: 40px;
  transform: scale(2.35);
}

[tp-loader] [tp-loader-rectangles] {
  stroke: var(--stroke);
  animation-name: animate-stroke;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
}

[tp-loader] [tp-loader-circle] {
  animation-name: animate-stroke-2;
  animation-duration: 4s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
  stroke-dashoffset: 1000;
  stroke-dasharray: 1000;
  fill: var(--stroke);
}

@keyframes animate-stroke {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes animate-stroke-2 {
  to {
    stroke-dashoffset: 0;
  }
}
[tp-loader][ds-color=brand] {
  --stroke: hsl(var(--med-color-brand-3));
}

[tp-loader][ds-color=aula] {
  --stroke: hsl(var(--med-color-aula-3));
}

[tp-loader][ds-color=material] {
  --stroke: hsl(var(--med-color-material-3));
}

[tp-loader][ds-color=questoes] {
  --stroke: hsl(var(--med-color-questoes-3));
}

[tp-loader][ds-color=revalida] {
  --stroke: hsl(var(--med-color-revalida-3));
}

[tp-loader][ds-color=provas] {
  --stroke: hsl(var(--med-color-provas-3));
}

[tp-loader][ds-color=neutral-1] {
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-loader][ds-color=neutral-2] {
  --stroke: hsl(var(--med-color-neutral-2));
}

[tp-loader][ds-color=neutral-3] {
  --stroke: hsl(var(--med-color-neutral-3));
}

[tp-loader][ds-color=neutral-4] {
  --stroke: hsl(var(--med-color-neutral-4));
}

[tp-loader][ds-color=neutral-5] {
  --stroke: hsl(var(--med-color-neutral-5));
}

[tp-loader][ds-color=neutral-6] {
  --stroke: hsl(var(--med-color-neutral-6));
}

[tp-loader][ds-color=neutral-7] {
  --stroke: hsl(var(--med-color-neutral-7));
}

[tp-loader][ds-color=neutral-8] {
  --stroke: hsl(var(--med-color-neutral-8));
}

[tp-loader][ds-color=neutral-9] {
  --stroke: hsl(var(--med-color-neutral-9));
}

[tp-loader][ds-color=neutral-10] {
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-loader][ds-color=neutral-15] {
  --stroke: hsl(var(--med-color-neutral-15));
}

[tp-loader][ds-color=neutral-25] {
  --stroke: hsl(var(--med-color-neutral-25));
}

[tp-loader][ds-color=neutral-35] {
  --stroke: hsl(var(--med-color-neutral-35));
}

[tp-loader][ds-color=neutral-45] {
  --stroke: hsl(var(--med-color-neutral-45));
}

[tp-loader][ds-color=neutral-55] {
  --stroke: hsl(var(--med-color-neutral-55));
}

[tp-loader][ds-color=neutral-65] {
  --stroke: hsl(var(--med-color-neutral-65));
}

[tp-loader][ds-color=neutral-75] {
  --stroke: hsl(var(--med-color-neutral-75));
}

[tp-loader][ds-color=neutral-85] {
  --stroke: hsl(var(--med-color-neutral-85));
}

[tp-loader][ds-color=neutral-95] {
  --stroke: hsl(var(--med-color-neutral-95));
}

[tp-loader][ds-color=fb-attention] {
  --stroke: hsl(var(--med-color-fb-attention));
}

[tp-loader][ds-color=fb-caution] {
  --stroke: hsl(var(--med-color-fb-caution));
}

[tp-loader][ds-color=fb-warning] {
  --stroke: hsl(var(--med-color-fb-warning));
}

[tp-loader][ds-color=fb-success] {
  --stroke: hsl(var(--med-color-fb-success));
}

[tp-loader-secondary] {
  --background: hsl(var(--med-color-neutral-10));
  display: inline-block;
  position: relative;
  width: 24px;
  height: 24px;
}

[tp-loader-secondary] div {
  transform-origin: 12px 12px;
  animation: loader-spinner 0.8s linear infinite;
}

[tp-loader-secondary] div:after {
  content: " ";
  display: block;
  position: absolute;
  top: 1px;
  left: 11px;
  width: 2px;
  height: 6px;
  border-radius: 10px;
  background: var(--background);
}

[tp-loader-secondary] div:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -0.7s;
}

[tp-loader-secondary] div:nth-child(2) {
  transform: rotate(45deg);
  animation-delay: -0.6s;
}

[tp-loader-secondary] div:nth-child(3) {
  transform: rotate(90deg);
  animation-delay: -0.5s;
}

[tp-loader-secondary] div:nth-child(4) {
  transform: rotate(135deg);
  animation-delay: -0.4s;
}

[tp-loader-secondary] div:nth-child(5) {
  transform: rotate(180deg);
  animation-delay: -0.3s;
}

[tp-loader-secondary] div:nth-child(6) {
  transform: rotate(225deg);
  animation-delay: -0.2s;
}

[tp-loader-secondary] div:nth-child(7) {
  transform: rotate(270deg);
  animation-delay: -0.1s;
}

[tp-loader-secondary] div:nth-child(8) {
  transform: rotate(315deg);
  animation-delay: 0s;
}

@keyframes loader-spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.3;
  }
}
[tp-loader-secondary][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
}

[tp-loader-secondary][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
}

[tp-loader-secondary][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
}

[tp-loader-secondary][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
}

[tp-loader-secondary][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
}

[tp-loader-secondary][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
}

[tp-loader-secondary][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
}

[tp-loader-secondary][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
}

[tp-loader-secondary][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
}

[tp-loader-secondary][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
}

[tp-loader-secondary][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
}

[tp-loader-secondary][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
}

[tp-loader-secondary][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
}

[tp-loader-secondary][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
}

[tp-loader-secondary][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
}

[tp-loader-secondary][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
}

[tp-loader-secondary][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-15));
}

[tp-loader-secondary][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-25));
}

[tp-loader-secondary][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-35));
}

[tp-loader-secondary][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-45));
}

[tp-loader-secondary][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-55));
}

[tp-loader-secondary][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-65));
}

[tp-loader-secondary][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-75));
}

[tp-loader-secondary][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-85));
}

[tp-loader-secondary][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-95));
}

[tp-loader-secondary][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
}

[tp-loader-secondary][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
}

[tp-loader-secondary][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
}

[tp-loader-secondary][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
}

[tp-progress] {
  width: 100%;
  display: flex;
  align-items: center;
}

[tp-progress-bar] {
  flex: 1;
  height: 8px;
  border-radius: 100px;
  background: hsl(var(--med-color-neutral-3));
}

[tp-progress-fill] {
  height: 100%;
  border-radius: 100px;
  width: calc(var(--porcentagem) * 1%);
  background: hsl(var(--med-color-brand-3));
}

[tp-progress-text] {
  width: 40px;
  text-align: right;
}

[tp-progress][ds-color=brand] [tp-progress-fill] {
  background: hsl(var(--med-color-brand-3));
}

[tp-progress][ds-color=brand] [tp-progress-bar] {
  background: hsl(var(--med-color-brand-1));
}

[tp-progress][ds-color=aula] [tp-progress-fill] {
  background: hsl(var(--med-color-aula-3));
}

[tp-progress][ds-color=aula] [tp-progress-bar] {
  background: hsl(var(--med-color-aula-1));
}

[tp-progress][ds-color=material] [tp-progress-fill] {
  background: hsl(var(--med-color-material-3));
}

[tp-progress][ds-color=material] [tp-progress-bar] {
  background: hsl(var(--med-color-material-1));
}

[tp-progress][ds-color=questoes] [tp-progress-fill] {
  background: hsl(var(--med-color-questoes-3));
}

[tp-progress][ds-color=questoes] [tp-progress-bar] {
  background: hsl(var(--med-color-questoes-1));
}

[tp-progress][ds-color=revalida] [tp-progress-fill] {
  background: hsl(var(--med-color-revalida-3));
}

[tp-progress][ds-color=revalida] [tp-progress-bar] {
  background: hsl(var(--med-color-revalida-1));
}

[tp-progress][ds-color=provas] [tp-progress-fill] {
  background: hsl(var(--med-color-provas-3));
}

[tp-progress][ds-color=provas] [tp-progress-bar] {
  background: hsl(var(--med-color-provas-1));
}

[tp-progress][ds-color=neutral-1] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-1] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-2] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-2));
}

[tp-progress][ds-color=neutral-2] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-3] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-3));
}

[tp-progress][ds-color=neutral-3] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-4] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-4));
}

[tp-progress][ds-color=neutral-4] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-5] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-5));
}

[tp-progress][ds-color=neutral-5] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-6] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-6));
}

[tp-progress][ds-color=neutral-6] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-7] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-7));
}

[tp-progress][ds-color=neutral-7] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-8] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-8));
}

[tp-progress][ds-color=neutral-8] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-9] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-9));
}

[tp-progress][ds-color=neutral-9] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-10] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-10] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-15] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-15));
}

[tp-progress][ds-color=neutral-15] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-25] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-25));
}

[tp-progress][ds-color=neutral-25] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-35] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-35));
}

[tp-progress][ds-color=neutral-35] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-45] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-45));
}

[tp-progress][ds-color=neutral-45] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-55] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-55));
}

[tp-progress][ds-color=neutral-55] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-10));
}

[tp-progress][ds-color=neutral-65] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-65));
}

[tp-progress][ds-color=neutral-65] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-75] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-75));
}

[tp-progress][ds-color=neutral-75] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-85] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-85));
}

[tp-progress][ds-color=neutral-85] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=neutral-95] [tp-progress-fill] {
  background: hsl(var(--med-color-neutral-95));
}

[tp-progress][ds-color=neutral-95] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=fb-attention] [tp-progress-fill] {
  background: hsl(var(--med-color-fb-attention));
}

[tp-progress][ds-color=fb-attention] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=fb-caution] [tp-progress-fill] {
  background: hsl(var(--med-color-fb-caution));
}

[tp-progress][ds-color=fb-caution] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=fb-warning] [tp-progress-fill] {
  background: hsl(var(--med-color-fb-warning));
}

[tp-progress][ds-color=fb-warning] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-progress][ds-color=fb-success] [tp-progress-fill] {
  background: hsl(var(--med-color-fb-success));
}

[tp-progress][ds-color=fb-success] [tp-progress-bar] {
  background: hsl(var(--med-color-neutral-1));
}

[tp-container-radio] {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
}

[tp-container-radio] [tp-label] {
  width: 100%;
}

[tp-radio] {
  display: none;
}

[tp-radio] + [tp-label] {
  --background: transparent;
  --background-checked: hsl(var(--med-color-brand-4));
  --border-color: hsl(var(--med-color-brand-4));
  --border-radius: 50%;
  --border: 2px solid var(--border-color);
  --opacity: 1;
  --size: 16px;
  --size-checked: 10px;
  --margin: 0 8px 0 0;
  --top: 50%;
  --left-after: 5px;
  --right-before: 0;
  --right-after: 5px;
  cursor: pointer;
  opacity: var(--opacity);
}

[tp-radio] + [tp-label]::before {
  content: "";
  margin: var(--margin);
  height: var(--size);
  width: var(--size);
  border-radius: var(--border-radius);
  border: var(--border);
  background-color: var(--background);
  display: inline-block;
  vertical-align: middle;
}

[tp-radio] + [tp-label]::after {
  content: "";
  height: var(--size-checked);
  width: var(--size-checked);
  border-radius: var(--border-radius);
  background-color: var(--background-checked);
  display: inline-block;
  vertical-align: middle;
  position: absolute;
  top: var(--top);
  left: var(--left-after);
  transform: translate(0, -50%);
  display: none;
}

[tp-radio]:checked + [tp-label]::after {
  display: block;
}

[inverted] [tp-label]::before {
  --margin: 0;
  position: absolute;
  top: var(--top);
  right: var(--right-before);
  transform: translate(0, -50%);
}

[inverted] [tp-radio]:checked + [tp-label]::after {
  --left-after: auto;
  top: var(--top);
  right: var(--right-after);
  transform: translate(0, -50%);
}

[tp-radio] + [tp-label]:hover, [tp-radio] + [tp-label]:focus {
  --background-checked: hsl(var(--med-color-brand-5));
  --border-color: hsl(var(--med-color-brand-5));
}

[tp-container-radio][disabled] [tp-label] {
  --opacity: 0.5;
}

[tp-container-radio][ds-name=secondary] [tp-label] {
  --background: hsl(var(--med-color-neutral-10));
}

[tp-container-radio][ds-name=secondary] [tp-label]::before {
  --border: none;
}

[tp-container-radio][ds-name=secondary] [tp-label]::after {
  --left-after: 3px;
}

[inverted][ds-name=secondary] [tp-radio]:checked + [tp-label]::after {
  top: 50%;
  left: auto;
  right: 3.5px;
  transform: translate(0, -50%);
}

[tp-container-radio][ds-color=brand] [tp-label] {
  --background-checked: hsl(var(--med-color-brand-4));
  --border-color: hsl(var(--med-color-brand-4));
}

[tp-container-radio][ds-color=brand] [tp-label]:hover, [tp-container-radio][ds-color=brand] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-brand-5));
  --border-color: hsl(var(--med-color-brand-5));
}

[tp-container-radio][ds-color=aula] [tp-label] {
  --background-checked: hsl(var(--med-color-aula-4));
  --border-color: hsl(var(--med-color-aula-4));
}

[tp-container-radio][ds-color=aula] [tp-label]:hover, [tp-container-radio][ds-color=aula] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-aula-5));
  --border-color: hsl(var(--med-color-aula-5));
}

[tp-container-radio][ds-color=material] [tp-label] {
  --background-checked: hsl(var(--med-color-material-4));
  --border-color: hsl(var(--med-color-material-4));
}

[tp-container-radio][ds-color=material] [tp-label]:hover, [tp-container-radio][ds-color=material] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-material-5));
  --border-color: hsl(var(--med-color-material-5));
}

[tp-container-radio][ds-color=questoes] [tp-label] {
  --background-checked: hsl(var(--med-color-questoes-4));
  --border-color: hsl(var(--med-color-questoes-4));
}

[tp-container-radio][ds-color=questoes] [tp-label]:hover, [tp-container-radio][ds-color=questoes] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-questoes-5));
  --border-color: hsl(var(--med-color-questoes-5));
}

[tp-container-radio][ds-color=revalida] [tp-label] {
  --background-checked: hsl(var(--med-color-revalida-4));
  --border-color: hsl(var(--med-color-revalida-4));
}

[tp-container-radio][ds-color=revalida] [tp-label]:hover, [tp-container-radio][ds-color=revalida] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-revalida-5));
  --border-color: hsl(var(--med-color-revalida-5));
}

[tp-container-radio][ds-color=provas] [tp-label] {
  --background-checked: hsl(var(--med-color-provas-4));
  --border-color: hsl(var(--med-color-provas-4));
}

[tp-container-radio][ds-color=provas] [tp-label]:hover, [tp-container-radio][ds-color=provas] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-provas-5));
  --border-color: hsl(var(--med-color-provas-5));
}

[tp-container-radio][ds-color=neutral-1] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
}

[tp-container-radio][ds-color=neutral-1] [tp-label]:hover, [tp-container-radio][ds-color=neutral-1] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
}

[tp-container-radio][ds-color=neutral-2] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-2));
  --border-color: hsl(var(--med-color-neutral-2));
}

[tp-container-radio][ds-color=neutral-2] [tp-label]:hover, [tp-container-radio][ds-color=neutral-2] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-2));
  --border-color: hsl(var(--med-color-neutral-2));
}

[tp-container-radio][ds-color=neutral-3] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-3));
  --border-color: hsl(var(--med-color-neutral-3));
}

[tp-container-radio][ds-color=neutral-3] [tp-label]:hover, [tp-container-radio][ds-color=neutral-3] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-3));
  --border-color: hsl(var(--med-color-neutral-3));
}

[tp-container-radio][ds-color=neutral-4] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-4));
  --border-color: hsl(var(--med-color-neutral-4));
}

[tp-container-radio][ds-color=neutral-4] [tp-label]:hover, [tp-container-radio][ds-color=neutral-4] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-4));
  --border-color: hsl(var(--med-color-neutral-4));
}

[tp-container-radio][ds-color=neutral-5] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-5));
  --border-color: hsl(var(--med-color-neutral-5));
}

[tp-container-radio][ds-color=neutral-5] [tp-label]:hover, [tp-container-radio][ds-color=neutral-5] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-5));
  --border-color: hsl(var(--med-color-neutral-5));
}

[tp-container-radio][ds-color=neutral-6] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-6));
  --border-color: hsl(var(--med-color-neutral-6));
}

[tp-container-radio][ds-color=neutral-6] [tp-label]:hover, [tp-container-radio][ds-color=neutral-6] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-6));
  --border-color: hsl(var(--med-color-neutral-6));
}

[tp-container-radio][ds-color=neutral-7] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-7));
  --border-color: hsl(var(--med-color-neutral-7));
}

[tp-container-radio][ds-color=neutral-7] [tp-label]:hover, [tp-container-radio][ds-color=neutral-7] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-7));
  --border-color: hsl(var(--med-color-neutral-7));
}

[tp-container-radio][ds-color=neutral-8] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-8));
  --border-color: hsl(var(--med-color-neutral-8));
}

[tp-container-radio][ds-color=neutral-8] [tp-label]:hover, [tp-container-radio][ds-color=neutral-8] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-8));
  --border-color: hsl(var(--med-color-neutral-8));
}

[tp-container-radio][ds-color=neutral-9] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-9));
  --border-color: hsl(var(--med-color-neutral-9));
}

[tp-container-radio][ds-color=neutral-9] [tp-label]:hover, [tp-container-radio][ds-color=neutral-9] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-9));
  --border-color: hsl(var(--med-color-neutral-9));
}

[tp-container-radio][ds-color=neutral-10] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-container-radio][ds-color=neutral-10] [tp-label]:hover, [tp-container-radio][ds-color=neutral-10] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
}

[tp-container-radio][ds-color=neutral-15] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-15));
  --border-color: hsl(var(--med-color-neutral-15));
}

[tp-container-radio][ds-color=neutral-15] [tp-label]:hover, [tp-container-radio][ds-color=neutral-15] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-15));
  --border-color: hsl(var(--med-color-neutral-15));
}

[tp-container-radio][ds-color=neutral-25] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-25));
  --border-color: hsl(var(--med-color-neutral-25));
}

[tp-container-radio][ds-color=neutral-25] [tp-label]:hover, [tp-container-radio][ds-color=neutral-25] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-25));
  --border-color: hsl(var(--med-color-neutral-25));
}

[tp-container-radio][ds-color=neutral-35] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-35));
  --border-color: hsl(var(--med-color-neutral-35));
}

[tp-container-radio][ds-color=neutral-35] [tp-label]:hover, [tp-container-radio][ds-color=neutral-35] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-35));
  --border-color: hsl(var(--med-color-neutral-35));
}

[tp-container-radio][ds-color=neutral-45] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-45));
  --border-color: hsl(var(--med-color-neutral-45));
}

[tp-container-radio][ds-color=neutral-45] [tp-label]:hover, [tp-container-radio][ds-color=neutral-45] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-45));
  --border-color: hsl(var(--med-color-neutral-45));
}

[tp-container-radio][ds-color=neutral-55] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-55));
  --border-color: hsl(var(--med-color-neutral-55));
}

[tp-container-radio][ds-color=neutral-55] [tp-label]:hover, [tp-container-radio][ds-color=neutral-55] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-55));
  --border-color: hsl(var(--med-color-neutral-55));
}

[tp-container-radio][ds-color=neutral-65] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-65));
  --border-color: hsl(var(--med-color-neutral-65));
}

[tp-container-radio][ds-color=neutral-65] [tp-label]:hover, [tp-container-radio][ds-color=neutral-65] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-65));
  --border-color: hsl(var(--med-color-neutral-65));
}

[tp-container-radio][ds-color=neutral-75] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-75));
  --border-color: hsl(var(--med-color-neutral-75));
}

[tp-container-radio][ds-color=neutral-75] [tp-label]:hover, [tp-container-radio][ds-color=neutral-75] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-75));
  --border-color: hsl(var(--med-color-neutral-75));
}

[tp-container-radio][ds-color=neutral-85] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-85));
  --border-color: hsl(var(--med-color-neutral-85));
}

[tp-container-radio][ds-color=neutral-85] [tp-label]:hover, [tp-container-radio][ds-color=neutral-85] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-85));
  --border-color: hsl(var(--med-color-neutral-85));
}

[tp-container-radio][ds-color=neutral-95] [tp-label] {
  --background-checked: hsl(var(--med-color-neutral-95));
  --border-color: hsl(var(--med-color-neutral-95));
}

[tp-container-radio][ds-color=neutral-95] [tp-label]:hover, [tp-container-radio][ds-color=neutral-95] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-neutral-95));
  --border-color: hsl(var(--med-color-neutral-95));
}

[tp-container-radio][ds-color=fb-attention] [tp-label] {
  --background-checked: hsl(var(--med-color-fb-attention));
  --border-color: hsl(var(--med-color-fb-attention));
}

[tp-container-radio][ds-color=fb-attention] [tp-label]:hover, [tp-container-radio][ds-color=fb-attention] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-fb-attention));
  --border-color: hsl(var(--med-color-fb-attention));
}

[tp-container-radio][ds-color=fb-caution] [tp-label] {
  --background-checked: hsl(var(--med-color-fb-caution));
  --border-color: hsl(var(--med-color-fb-caution));
}

[tp-container-radio][ds-color=fb-caution] [tp-label]:hover, [tp-container-radio][ds-color=fb-caution] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-fb-caution));
  --border-color: hsl(var(--med-color-fb-caution));
}

[tp-container-radio][ds-color=fb-warning] [tp-label] {
  --background-checked: hsl(var(--med-color-fb-warning));
  --border-color: hsl(var(--med-color-fb-warning));
}

[tp-container-radio][ds-color=fb-warning] [tp-label]:hover, [tp-container-radio][ds-color=fb-warning] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-fb-warning));
  --border-color: hsl(var(--med-color-fb-warning));
}

[tp-container-radio][ds-color=fb-success] [tp-label] {
  --background-checked: hsl(var(--med-color-fb-success));
  --border-color: hsl(var(--med-color-fb-success));
}

[tp-container-radio][ds-color=fb-success] [tp-label]:hover, [tp-container-radio][ds-color=fb-success] [tp-label]:focus {
  --background-checked: hsl(var(--med-color-fb-success));
  --border-color: hsl(var(--med-color-fb-success));
}

[tp-container-select] {
  --padding: 12px 8px 12px 16px;
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --border-radius: 8px;
  --height: 40px;
  --padding-item: 12px 16px;
  --border-color: hsl(var(--med-color-neutral-4));
  --background-list: hsl(var(--med-color-neutral-3));
  --background-hover: hsl(var(--med-color-neutral-25));
  --border-radius-list: 0 0 8px 8px;
  --display-content: none;
  --stroke: hsl(var(--med-color-neutral-6));
  --border-header: 1px solid transparent;
  --box-shadow: 0px 20px 20px hsl(var(--med-color-neutral-1), 0.25);
  position: relative;
}

[tp-container-select] [tp-select] {
  display: none;
}

[tp-container-select] .med-icon {
  min-height: 24px;
  min-width: 24px;
  stroke: var(--stroke);
}

[tp-label] {
  color: var(--color);
}

[tp-label] + [tp-container-select] {
  margin-top: 8px;
}

[tp-select-header] {
  cursor: pointer;
  padding: var(--padding);
  background: var(--background);
  color: var(--color);
  border-radius: var(--border-radius);
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: var(--border-header);
}

[tp-select-header] [tp-label] {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

[tp-select-content] {
  display: var(--display-content);
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  z-index: 10;
}

[tp-select-content] [tp-select-list] {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--background-list);
  border-radius: var(--border-radius-list);
  max-height: 224px;
  overflow: auto;
  box-shadow: var(--box-shadow);
}

[tp-select-content] [tp-select-item] {
  padding: var(--padding-item);
  cursor: pointer;
}

[tp-select-content] [tp-select-item]:hover {
  background: var(--background-hover);
}

[tp-select-content] [tp-select-item]:not(:last-child) {
  border-bottom: 1px solid var(--border-color);
}

[tp-container-select].open [tp-select-header] {
  --border-radius: 8px 8px 0 0;
}

[tp-container-select].open .med-icon {
  transform: rotate(180deg);
}

[tp-container-select].open [tp-select-content] {
  --display-content: block;
}

[tp-container-select][ds-name=secondary] {
  --background: hsl(var(--med-color-neutral-3));
  --background-list: hsl(var(--med-color-neutral-4));
  --border-color: hsl(var(--med-color-neutral-5));
}

[tp-container-select][ds-name=secondary] [tp-select-item]:hover {
  --background-hover: hsl(var(--med-color-neutral-35));
}

[tp-container-select][disabled] {
  opacity: 0.4;
}

[tp-container-select][disabled] [tp-select-header],
[tp-container-select][disabled] [tp-select-item] {
  cursor: default;
}

[tp-container-select][state=attention] [tp-select-header] {
  --border-header: 1px solid hsl(var(--med-color-fb-attention));
}

[tp-container-select][state=caution] [tp-select-header] {
  --border-header: 1px solid hsl(var(--med-color-fb-caution));
}

[tp-container-select][state=warning] [tp-select-header] {
  --border-header: 1px solid hsl(var(--med-color-fb-warning));
}

[tp-container-select][state=success] [tp-select-header] {
  --border-header: 1px solid hsl(var(--med-color-fb-success));
}

[tp-container-select][ds-color=brand] {
  --background: hsl(var(--med-color-brand-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-brand-4));
  --background-hover: hsl(var(--med-color-brand-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=brand][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-brand-4));
}

[tp-container-select][ds-color=aula] {
  --background: hsl(var(--med-color-aula-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-aula-4));
  --background-hover: hsl(var(--med-color-aula-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=aula][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-aula-4));
}

[tp-container-select][ds-color=material] {
  --background: hsl(var(--med-color-material-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-material-4));
  --background-hover: hsl(var(--med-color-material-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=material][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-material-4));
}

[tp-container-select][ds-color=questoes] {
  --background: hsl(var(--med-color-questoes-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-questoes-4));
  --background-hover: hsl(var(--med-color-questoes-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=questoes][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-questoes-4));
}

[tp-container-select][ds-color=revalida] {
  --background: hsl(var(--med-color-revalida-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-revalida-4));
  --background-hover: hsl(var(--med-color-revalida-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=revalida][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-revalida-4));
}

[tp-container-select][ds-color=provas] {
  --background: hsl(var(--med-color-provas-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-provas-4));
  --background-hover: hsl(var(--med-color-provas-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=provas][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-provas-4));
}

[tp-container-select][ds-color=neutral-1] {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-2));
  --background-hover: hsl(var(--med-color-neutral-2));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-1][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-2));
}

[tp-container-select][ds-color=neutral-2] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-3));
  --background-hover: hsl(var(--med-color-neutral-3));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-2][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-3));
}

[tp-container-select][ds-color=neutral-3] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-4));
  --background-hover: hsl(var(--med-color-neutral-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-3][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-4));
}

[tp-container-select][ds-color=neutral-4] {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-5));
  --background-hover: hsl(var(--med-color-neutral-5));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-4][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-5));
}

[tp-container-select][ds-color=neutral-5] {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-6));
  --background-hover: hsl(var(--med-color-neutral-6));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-5][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-6));
}

[tp-container-select][ds-color=neutral-6] {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-7));
  --background-hover: hsl(var(--med-color-neutral-7));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-6][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-7));
}

[tp-container-select][ds-color=neutral-7] {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-8));
  --background-hover: hsl(var(--med-color-neutral-8));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-7][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-8));
}

[tp-container-select][ds-color=neutral-8] {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-9));
  --background-hover: hsl(var(--med-color-neutral-9));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-8][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-9));
}

[tp-container-select][ds-color=neutral-9] {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-10));
  --background-hover: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-9][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-10] {
  --background: hsl(var(--med-color-neutral-10));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-11));
  --background-hover: hsl(var(--med-color-neutral-11));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-10][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-11));
}

[tp-container-select][ds-color=neutral-15] {
  --background: hsl(var(--med-color-neutral-1));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-2));
  --background-hover: hsl(var(--med-color-neutral-2));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-15][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-2));
}

[tp-container-select][ds-color=neutral-25] {
  --background: hsl(var(--med-color-neutral-2));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-3));
  --background-hover: hsl(var(--med-color-neutral-3));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-25][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-3));
}

[tp-container-select][ds-color=neutral-35] {
  --background: hsl(var(--med-color-neutral-3));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-4));
  --background-hover: hsl(var(--med-color-neutral-4));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-35][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-4));
}

[tp-container-select][ds-color=neutral-45] {
  --background: hsl(var(--med-color-neutral-4));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-5));
  --background-hover: hsl(var(--med-color-neutral-5));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-45][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-5));
}

[tp-container-select][ds-color=neutral-55] {
  --background: hsl(var(--med-color-neutral-5));
  --color: hsl(var(--med-color-neutral-10));
  --border-color: hsl(var(--med-color-neutral-10));
  --background-list: hsl(var(--med-color-neutral-6));
  --background-hover: hsl(var(--med-color-neutral-6));
  --stroke: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=neutral-55][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-6));
}

[tp-container-select][ds-color=neutral-65] {
  --background: hsl(var(--med-color-neutral-6));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-7));
  --background-hover: hsl(var(--med-color-neutral-7));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-65][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-7));
}

[tp-container-select][ds-color=neutral-75] {
  --background: hsl(var(--med-color-neutral-7));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-8));
  --background-hover: hsl(var(--med-color-neutral-8));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-75][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-8));
}

[tp-container-select][ds-color=neutral-85] {
  --background: hsl(var(--med-color-neutral-8));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-9));
  --background-hover: hsl(var(--med-color-neutral-9));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-85][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-9));
}

[tp-container-select][ds-color=neutral-95] {
  --background: hsl(var(--med-color-neutral-9));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-neutral-10));
  --background-hover: hsl(var(--med-color-neutral-10));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=neutral-95][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-neutral-10));
}

[tp-container-select][ds-color=fb-attention] {
  --background: hsl(var(--med-color-fb-attention));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-fb-attention));
  --background-hover: hsl(var(--med-color-fb-attention));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=fb-attention][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-fb-attention));
}

[tp-container-select][ds-color=fb-caution] {
  --background: hsl(var(--med-color-fb-caution));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-fb-caution));
  --background-hover: hsl(var(--med-color-fb-caution));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=fb-caution][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-fb-caution));
}

[tp-container-select][ds-color=fb-warning] {
  --background: hsl(var(--med-color-fb-warning));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-fb-warning));
  --background-hover: hsl(var(--med-color-fb-warning));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=fb-warning][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-fb-warning));
}

[tp-container-select][ds-color=fb-success] {
  --background: hsl(var(--med-color-fb-success));
  --color: hsl(var(--med-color-neutral-1));
  --border-color: hsl(var(--med-color-neutral-1));
  --background-list: hsl(var(--med-color-fb-success));
  --background-hover: hsl(var(--med-color-fb-success));
  --stroke: hsl(var(--med-color-neutral-1));
}

[tp-container-select][ds-color=fb-success][ds-name=secondary] [tp-select-item] {
  --background-hover: hsl(var(--med-color-fb-success));
}

[tp-container-toggle] {
  display: flex;
  align-items: center;
  width: 100%;
}

[tp-container-toggle] label:last-child {
  margin-left: 10px;
  width: 100%;
}

[tp-container-toggle][disabled] {
  opacity: 0.5;
}

[tp-container-toggle][inverted] {
  position: relative;
}

[tp-container-toggle][inverted] label:last-child {
  margin-left: 0px;
}

[tp-toggle] {
  position: relative;
  display: inline-block;
  min-width: 34px;
  height: 22px;
}

[tp-toggle] input {
  opacity: 0;
  width: 0;
  height: 0;
}

[tp-toggle][inverted] {
  position: absolute;
  right: 0;
}

[tp-toggle-slider] {
  --background-slider: hsl(var(--med-color-neutral-4));
  --background-round: hsl(var(--med-color-neutral-10));
  --background-checked: hsl(var(--med-color-brand-3));
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--background-slider);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

[tp-toggle-slider]:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background: var(--background-round);
  -webkit-transition: 0.4s;
  transition: 0.4s;
}

input:checked + [tp-toggle-slider] {
  background: var(--background-checked);
}

input:focus + [tp-toggle-slider] {
  box-shadow: 0 0 1px var(--background-checked);
}

input:checked + [tp-toggle-slider]:before {
  -webkit-transform: translateX(10.5px);
  -ms-transform: translateX(10.5px);
  transform: translateX(10.5px);
}

[tp-toggle-slider][tp-toggle-round] {
  border-radius: 34px;
}

[tp-toggle-slider][tp-toggle-round]:before {
  border-radius: 50%;
}

[tp-toggle-slider][ds-color=brand] {
  --background-checked: hsl(var(--med-color-brand-3));
}

[tp-toggle-slider][ds-color=aula] {
  --background-checked: hsl(var(--med-color-aula-3));
}

[tp-toggle-slider][ds-color=material] {
  --background-checked: hsl(var(--med-color-material-3));
}

[tp-toggle-slider][ds-color=questoes] {
  --background-checked: hsl(var(--med-color-questoes-3));
}

[tp-toggle-slider][ds-color=revalida] {
  --background-checked: hsl(var(--med-color-revalida-3));
}

[tp-toggle-slider][ds-color=provas] {
  --background-checked: hsl(var(--med-color-provas-3));
}

[tp-toggle-slider][ds-color=neutral-1] {
  --background-checked: hsl(var(--med-color-neutral-1));
}

[tp-toggle-slider][ds-color=neutral-2] {
  --background-checked: hsl(var(--med-color-neutral-2));
}

[tp-toggle-slider][ds-color=neutral-3] {
  --background-checked: hsl(var(--med-color-neutral-3));
}

[tp-toggle-slider][ds-color=neutral-4] {
  --background-checked: hsl(var(--med-color-neutral-4));
}

[tp-toggle-slider][ds-color=neutral-5] {
  --background-checked: hsl(var(--med-color-neutral-5));
}

[tp-toggle-slider][ds-color=neutral-6] {
  --background-checked: hsl(var(--med-color-neutral-6));
}

[tp-toggle-slider][ds-color=neutral-7] {
  --background-checked: hsl(var(--med-color-neutral-7));
}

[tp-toggle-slider][ds-color=neutral-8] {
  --background-checked: hsl(var(--med-color-neutral-8));
}

[tp-toggle-slider][ds-color=neutral-9] {
  --background-checked: hsl(var(--med-color-neutral-9));
}

[tp-toggle-slider][ds-color=neutral-10] {
  --background-checked: hsl(var(--med-color-neutral-10));
}

[tp-toggle-slider][ds-color=neutral-15] {
  --background-checked: hsl(var(--med-color-neutral-15));
}

[tp-toggle-slider][ds-color=neutral-25] {
  --background-checked: hsl(var(--med-color-neutral-25));
}

[tp-toggle-slider][ds-color=neutral-35] {
  --background-checked: hsl(var(--med-color-neutral-35));
}

[tp-toggle-slider][ds-color=neutral-45] {
  --background-checked: hsl(var(--med-color-neutral-45));
}

[tp-toggle-slider][ds-color=neutral-55] {
  --background-checked: hsl(var(--med-color-neutral-55));
}

[tp-toggle-slider][ds-color=neutral-65] {
  --background-checked: hsl(var(--med-color-neutral-65));
}

[tp-toggle-slider][ds-color=neutral-75] {
  --background-checked: hsl(var(--med-color-neutral-75));
}

[tp-toggle-slider][ds-color=neutral-85] {
  --background-checked: hsl(var(--med-color-neutral-85));
}

[tp-toggle-slider][ds-color=neutral-95] {
  --background-checked: hsl(var(--med-color-neutral-95));
}

[tp-toggle-slider][ds-color=fb-attention] {
  --background-checked: hsl(var(--med-color-fb-attention));
}

[tp-toggle-slider][ds-color=fb-caution] {
  --background-checked: hsl(var(--med-color-fb-caution));
}

[tp-toggle-slider][ds-color=fb-warning] {
  --background-checked: hsl(var(--med-color-fb-warning));
}

[tp-toggle-slider][ds-color=fb-success] {
  --background-checked: hsl(var(--med-color-fb-success));
}

/*# sourceMappingURL=templarios-css-framework.css.map */
.templarios-web [tp-container-checkbox] {
  --border-color: hsl(var(--med-color-neutral-4));
  --margin: 0 16px 0 0;
  --padding: 8px 0;
  padding: var(--padding);
}

.templarios-web [tp-checkbox]:checked + [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-brand-4));
}

.templarios-web [tp-checkbox] + [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-checkbox] + [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-brand-5));
}

.templarios-web [tp-container-checkbox][ds-color=brand] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-brand-4));
  --border-color-checked: hsl(var(--med-color-brand-4));
}

.templarios-web [tp-container-checkbox][ds-color=brand] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=brand] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-brand-5));
  --border-color-checked: hsl(var(--med-color-brand-5));
}

.templarios-web [tp-container-checkbox][ds-color=aula] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-aula-4));
  --border-color-checked: hsl(var(--med-color-aula-4));
}

.templarios-web [tp-container-checkbox][ds-color=aula] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=aula] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-aula-5));
  --border-color-checked: hsl(var(--med-color-aula-5));
}

.templarios-web [tp-container-checkbox][ds-color=material] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-material-4));
  --border-color-checked: hsl(var(--med-color-material-4));
}

.templarios-web [tp-container-checkbox][ds-color=material] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=material] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-material-5));
  --border-color-checked: hsl(var(--med-color-material-5));
}

.templarios-web [tp-container-checkbox][ds-color=questoes] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-questoes-4));
  --border-color-checked: hsl(var(--med-color-questoes-4));
}

.templarios-web [tp-container-checkbox][ds-color=questoes] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=questoes] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-questoes-5));
  --border-color-checked: hsl(var(--med-color-questoes-5));
}

.templarios-web [tp-container-checkbox][ds-color=revalida] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-revalida-4));
  --border-color-checked: hsl(var(--med-color-revalida-4));
}

.templarios-web [tp-container-checkbox][ds-color=revalida] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=revalida] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-revalida-5));
  --border-color-checked: hsl(var(--med-color-revalida-5));
}

.templarios-web [tp-container-checkbox][ds-color=provas] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-provas-4));
  --border-color-checked: hsl(var(--med-color-provas-4));
}

.templarios-web [tp-container-checkbox][ds-color=provas] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=provas] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-provas-5));
  --border-color-checked: hsl(var(--med-color-provas-5));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-1] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-1));
  --border-color-checked: hsl(var(--med-color-neutral-1));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-1] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-1] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-1));
  --border-color-checked: hsl(var(--med-color-neutral-1));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-2] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-2));
  --border-color-checked: hsl(var(--med-color-neutral-2));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-2] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-2] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-2));
  --border-color-checked: hsl(var(--med-color-neutral-2));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-3] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-3));
  --border-color-checked: hsl(var(--med-color-neutral-3));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-3] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-3] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-3));
  --border-color-checked: hsl(var(--med-color-neutral-3));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-4] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-4));
  --border-color-checked: hsl(var(--med-color-neutral-4));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-4] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-4] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-4));
  --border-color-checked: hsl(var(--med-color-neutral-4));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-5] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-5));
  --border-color-checked: hsl(var(--med-color-neutral-5));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-5] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-5] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-5));
  --border-color-checked: hsl(var(--med-color-neutral-5));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-6] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-6));
  --border-color-checked: hsl(var(--med-color-neutral-6));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-6] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-6] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-6));
  --border-color-checked: hsl(var(--med-color-neutral-6));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-7] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-7));
  --border-color-checked: hsl(var(--med-color-neutral-7));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-7] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-7] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-7));
  --border-color-checked: hsl(var(--med-color-neutral-7));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-8] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-8));
  --border-color-checked: hsl(var(--med-color-neutral-8));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-8] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-8] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-8));
  --border-color-checked: hsl(var(--med-color-neutral-8));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-9] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-9));
  --border-color-checked: hsl(var(--med-color-neutral-9));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-9] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-9] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-9));
  --border-color-checked: hsl(var(--med-color-neutral-9));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-10] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-10] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-10] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-10));
  --border-color-checked: hsl(var(--med-color-neutral-10));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-15] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-15));
  --border-color-checked: hsl(var(--med-color-neutral-15));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-15] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-15] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-15));
  --border-color-checked: hsl(var(--med-color-neutral-15));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-25] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-25));
  --border-color-checked: hsl(var(--med-color-neutral-25));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-25] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-25] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-25));
  --border-color-checked: hsl(var(--med-color-neutral-25));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-35] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-35));
  --border-color-checked: hsl(var(--med-color-neutral-35));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-35] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-35] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-35));
  --border-color-checked: hsl(var(--med-color-neutral-35));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-45] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-45));
  --border-color-checked: hsl(var(--med-color-neutral-45));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-45] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-45] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-45));
  --border-color-checked: hsl(var(--med-color-neutral-45));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-55] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-55));
  --border-color-checked: hsl(var(--med-color-neutral-55));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-55] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-55] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-55));
  --border-color-checked: hsl(var(--med-color-neutral-55));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-65] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-65));
  --border-color-checked: hsl(var(--med-color-neutral-65));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-65] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-65] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-65));
  --border-color-checked: hsl(var(--med-color-neutral-65));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-75] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-75));
  --border-color-checked: hsl(var(--med-color-neutral-75));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-75] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-75] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-75));
  --border-color-checked: hsl(var(--med-color-neutral-75));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-85] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-85));
  --border-color-checked: hsl(var(--med-color-neutral-85));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-85] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-85] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-85));
  --border-color-checked: hsl(var(--med-color-neutral-85));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-95] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-95));
  --border-color-checked: hsl(var(--med-color-neutral-95));
}

.templarios-web [tp-container-checkbox][ds-color=neutral-95] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=neutral-95] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-neutral-95));
  --border-color-checked: hsl(var(--med-color-neutral-95));
}

.templarios-web [tp-container-checkbox][ds-color=fb-attention] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-attention));
  --border-color-checked: hsl(var(--med-color-fb-attention));
}

.templarios-web [tp-container-checkbox][ds-color=fb-attention] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=fb-attention] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-attention));
  --border-color-checked: hsl(var(--med-color-fb-attention));
}

.templarios-web [tp-container-checkbox][ds-color=fb-caution] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-caution));
  --border-color-checked: hsl(var(--med-color-fb-caution));
}

.templarios-web [tp-container-checkbox][ds-color=fb-caution] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=fb-caution] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-caution));
  --border-color-checked: hsl(var(--med-color-fb-caution));
}

.templarios-web [tp-container-checkbox][ds-color=fb-warning] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-warning));
  --border-color-checked: hsl(var(--med-color-fb-warning));
}

.templarios-web [tp-container-checkbox][ds-color=fb-warning] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=fb-warning] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-warning));
  --border-color-checked: hsl(var(--med-color-fb-warning));
}

.templarios-web [tp-container-checkbox][ds-color=fb-success] [tp-label] [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-success));
  --border-color-checked: hsl(var(--med-color-fb-success));
}

.templarios-web [tp-container-checkbox][ds-color=fb-success] [tp-label]:hover [tp-checkbox-frame], .templarios-web [tp-container-checkbox][ds-color=fb-success] [tp-label]:focus [tp-checkbox-frame] {
  --border-color: hsl(var(--med-color-fb-success));
  --border-color-checked: hsl(var(--med-color-fb-success));
}

.templarios-web [tp-container-input] {
  height: 48px;
}

.templarios-web [tp-container-input] [tp-input] {
  height: auto;
}

.templarios-web [tp-input] {
  height: 48px;
}

.templarios-web [tp-select-header] {
  --height: 48px;
}

.templarios-web [tp-select-content] {
  top: 48px;
}

.templarios-web ion-item ion-checkbox[slot=start] {
  margin: 0 16px 0 0;
}

.templarios-web ion-checkbox {
  --border-color: hsl(var(--med-color-neutral-4));
}

.templarios-web ion-checkbox:hover, .templarios-web ion-checkbox:focus {
  --border-color: hsl(var(--med-color-brand-5));
}

.templarios-web ion-checkbox[ds-color=brand] {
  --border-color: hsl(var(--med-color-brand-5));
}

.templarios-web ion-checkbox[ds-color=brand]:hover, .templarios-web ion-checkbox[ds-color=brand]:focus {
  --border-color: hsl(var(--med-color-brand-5));
}

.templarios-web ion-checkbox[ds-color=aula] {
  --border-color: hsl(var(--med-color-aula-5));
}

.templarios-web ion-checkbox[ds-color=aula]:hover, .templarios-web ion-checkbox[ds-color=aula]:focus {
  --border-color: hsl(var(--med-color-aula-5));
}

.templarios-web ion-checkbox[ds-color=material] {
  --border-color: hsl(var(--med-color-material-5));
}

.templarios-web ion-checkbox[ds-color=material]:hover, .templarios-web ion-checkbox[ds-color=material]:focus {
  --border-color: hsl(var(--med-color-material-5));
}

.templarios-web ion-checkbox[ds-color=questoes] {
  --border-color: hsl(var(--med-color-questoes-5));
}

.templarios-web ion-checkbox[ds-color=questoes]:hover, .templarios-web ion-checkbox[ds-color=questoes]:focus {
  --border-color: hsl(var(--med-color-questoes-5));
}

.templarios-web ion-checkbox[ds-color=revalida] {
  --border-color: hsl(var(--med-color-revalida-5));
}

.templarios-web ion-checkbox[ds-color=revalida]:hover, .templarios-web ion-checkbox[ds-color=revalida]:focus {
  --border-color: hsl(var(--med-color-revalida-5));
}

.templarios-web ion-checkbox[ds-color=provas] {
  --border-color: hsl(var(--med-color-provas-5));
}

.templarios-web ion-checkbox[ds-color=provas]:hover, .templarios-web ion-checkbox[ds-color=provas]:focus {
  --border-color: hsl(var(--med-color-provas-5));
}

.templarios-web ion-checkbox[ds-color=neutral-1] {
  --border-color: hsl(var(--med-color-neutral-1));
}

.templarios-web ion-checkbox[ds-color=neutral-1]:hover, .templarios-web ion-checkbox[ds-color=neutral-1]:focus {
  --border-color: hsl(var(--med-color-neutral-1));
}

.templarios-web ion-checkbox[ds-color=neutral-2] {
  --border-color: hsl(var(--med-color-neutral-2));
}

.templarios-web ion-checkbox[ds-color=neutral-2]:hover, .templarios-web ion-checkbox[ds-color=neutral-2]:focus {
  --border-color: hsl(var(--med-color-neutral-2));
}

.templarios-web ion-checkbox[ds-color=neutral-3] {
  --border-color: hsl(var(--med-color-neutral-3));
}

.templarios-web ion-checkbox[ds-color=neutral-3]:hover, .templarios-web ion-checkbox[ds-color=neutral-3]:focus {
  --border-color: hsl(var(--med-color-neutral-3));
}

.templarios-web ion-checkbox[ds-color=neutral-4] {
  --border-color: hsl(var(--med-color-neutral-4));
}

.templarios-web ion-checkbox[ds-color=neutral-4]:hover, .templarios-web ion-checkbox[ds-color=neutral-4]:focus {
  --border-color: hsl(var(--med-color-neutral-4));
}

.templarios-web ion-checkbox[ds-color=neutral-5] {
  --border-color: hsl(var(--med-color-neutral-5));
}

.templarios-web ion-checkbox[ds-color=neutral-5]:hover, .templarios-web ion-checkbox[ds-color=neutral-5]:focus {
  --border-color: hsl(var(--med-color-neutral-5));
}

.templarios-web ion-checkbox[ds-color=neutral-6] {
  --border-color: hsl(var(--med-color-neutral-6));
}

.templarios-web ion-checkbox[ds-color=neutral-6]:hover, .templarios-web ion-checkbox[ds-color=neutral-6]:focus {
  --border-color: hsl(var(--med-color-neutral-6));
}

.templarios-web ion-checkbox[ds-color=neutral-7] {
  --border-color: hsl(var(--med-color-neutral-7));
}

.templarios-web ion-checkbox[ds-color=neutral-7]:hover, .templarios-web ion-checkbox[ds-color=neutral-7]:focus {
  --border-color: hsl(var(--med-color-neutral-7));
}

.templarios-web ion-checkbox[ds-color=neutral-8] {
  --border-color: hsl(var(--med-color-neutral-8));
}

.templarios-web ion-checkbox[ds-color=neutral-8]:hover, .templarios-web ion-checkbox[ds-color=neutral-8]:focus {
  --border-color: hsl(var(--med-color-neutral-8));
}

.templarios-web ion-checkbox[ds-color=neutral-9] {
  --border-color: hsl(var(--med-color-neutral-9));
}

.templarios-web ion-checkbox[ds-color=neutral-9]:hover, .templarios-web ion-checkbox[ds-color=neutral-9]:focus {
  --border-color: hsl(var(--med-color-neutral-9));
}

.templarios-web ion-checkbox[ds-color=neutral-10] {
  --border-color: hsl(var(--med-color-neutral-10));
}

.templarios-web ion-checkbox[ds-color=neutral-10]:hover, .templarios-web ion-checkbox[ds-color=neutral-10]:focus {
  --border-color: hsl(var(--med-color-neutral-10));
}

.templarios-web ion-checkbox[ds-color=neutral-15] {
  --border-color: hsl(var(--med-color-neutral-15));
}

.templarios-web ion-checkbox[ds-color=neutral-15]:hover, .templarios-web ion-checkbox[ds-color=neutral-15]:focus {
  --border-color: hsl(var(--med-color-neutral-15));
}

.templarios-web ion-checkbox[ds-color=neutral-25] {
  --border-color: hsl(var(--med-color-neutral-25));
}

.templarios-web ion-checkbox[ds-color=neutral-25]:hover, .templarios-web ion-checkbox[ds-color=neutral-25]:focus {
  --border-color: hsl(var(--med-color-neutral-25));
}

.templarios-web ion-checkbox[ds-color=neutral-35] {
  --border-color: hsl(var(--med-color-neutral-35));
}

.templarios-web ion-checkbox[ds-color=neutral-35]:hover, .templarios-web ion-checkbox[ds-color=neutral-35]:focus {
  --border-color: hsl(var(--med-color-neutral-35));
}

.templarios-web ion-checkbox[ds-color=neutral-45] {
  --border-color: hsl(var(--med-color-neutral-45));
}

.templarios-web ion-checkbox[ds-color=neutral-45]:hover, .templarios-web ion-checkbox[ds-color=neutral-45]:focus {
  --border-color: hsl(var(--med-color-neutral-45));
}

.templarios-web ion-checkbox[ds-color=neutral-55] {
  --border-color: hsl(var(--med-color-neutral-55));
}

.templarios-web ion-checkbox[ds-color=neutral-55]:hover, .templarios-web ion-checkbox[ds-color=neutral-55]:focus {
  --border-color: hsl(var(--med-color-neutral-55));
}

.templarios-web ion-checkbox[ds-color=neutral-65] {
  --border-color: hsl(var(--med-color-neutral-65));
}

.templarios-web ion-checkbox[ds-color=neutral-65]:hover, .templarios-web ion-checkbox[ds-color=neutral-65]:focus {
  --border-color: hsl(var(--med-color-neutral-65));
}

.templarios-web ion-checkbox[ds-color=neutral-75] {
  --border-color: hsl(var(--med-color-neutral-75));
}

.templarios-web ion-checkbox[ds-color=neutral-75]:hover, .templarios-web ion-checkbox[ds-color=neutral-75]:focus {
  --border-color: hsl(var(--med-color-neutral-75));
}

.templarios-web ion-checkbox[ds-color=neutral-85] {
  --border-color: hsl(var(--med-color-neutral-85));
}

.templarios-web ion-checkbox[ds-color=neutral-85]:hover, .templarios-web ion-checkbox[ds-color=neutral-85]:focus {
  --border-color: hsl(var(--med-color-neutral-85));
}

.templarios-web ion-checkbox[ds-color=neutral-95] {
  --border-color: hsl(var(--med-color-neutral-95));
}

.templarios-web ion-checkbox[ds-color=neutral-95]:hover, .templarios-web ion-checkbox[ds-color=neutral-95]:focus {
  --border-color: hsl(var(--med-color-neutral-95));
}

.templarios-web ion-checkbox[ds-color=fb-attention] {
  --border-color: hsl(var(--med-color-fb-attention));
}

.templarios-web ion-checkbox[ds-color=fb-attention]:hover, .templarios-web ion-checkbox[ds-color=fb-attention]:focus {
  --border-color: hsl(var(--med-color-fb-attention));
}

.templarios-web ion-checkbox[ds-color=fb-caution] {
  --border-color: hsl(var(--med-color-fb-caution));
}

.templarios-web ion-checkbox[ds-color=fb-caution]:hover, .templarios-web ion-checkbox[ds-color=fb-caution]:focus {
  --border-color: hsl(var(--med-color-fb-caution));
}

.templarios-web ion-checkbox[ds-color=fb-warning] {
  --border-color: hsl(var(--med-color-fb-warning));
}

.templarios-web ion-checkbox[ds-color=fb-warning]:hover, .templarios-web ion-checkbox[ds-color=fb-warning]:focus {
  --border-color: hsl(var(--med-color-fb-warning));
}

.templarios-web ion-checkbox[ds-color=fb-success] {
  --border-color: hsl(var(--med-color-fb-success));
}

.templarios-web ion-checkbox[ds-color=fb-success]:hover, .templarios-web ion-checkbox[ds-color=fb-success]:focus {
  --border-color: hsl(var(--med-color-fb-success));
}

.templarios-web tp-input-container {
  height: 48px;
}

.templarios-web tp-input-container ion-input.sc-ion-input-md-h {
  height: auto;
}

.templarios-web tp-input-container + ion-label {
  display: block;
  margin-top: 8px;
}

.templarios-web ion-input.sc-ion-input-md-h {
  height: 48px;
}

.templarios-web ion-input.sc-ion-input-md-h + ion-label {
  display: block;
  margin-top: 8px;
}

.templarios-web ion-select {
  height: 48px;
}

/*# sourceMappingURL=templarios-web.css.map */
.clm {
  --color-primary: #bf9f40;
  --color-secondary: #bf4040;
}

.cir {
  --color-primary: #45ac39;
  --color-secondary: #3971ac;
}

.go {
  --color-primary: #8840bf;
  --color-secondary: #bf4086;
}

.pre {
  --color-primary: #409bbf;
  --color-secondary: #8840bf;
}

.ped {
  --color-primary: #bf409b;
  --color-secondary: #bf5340;
}

.outros {
  --color-primary: #4440bf;
  --color-secondary: #40bbbf;
}

.nopapo {
  --color-primary: #bf4840;
  --color-secondary: #4240bf;
}

@font-face {
  font-weight: 900;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-heavy-normal.eot");
  src: url("../../fonts/fsemeric-heavy-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-heavy-normal.woff") format("woff"), url("../../fonts/fsemeric-heavy-normal.svg#fsemeric-heavy-normal") format("svg");
}
@font-face {
  font-weight: 700;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-bold-normal.eot");
  src: url("../../fonts/fsemeric-bold-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-bold-normal.woff") format("woff"), url("../../fonts/fsemeric-bold-normal.svg#fsemeric-bold-normal") format("svg");
}
@font-face {
  font-weight: 600;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-semibold-normal.eot");
  src: url("../../fonts/fsemeric-semibold-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-semibold-normal.woff") format("woff"), url("../../fonts/fsemeric-semibold-normal.svg#fsemeric-semibold-normal") format("svg");
}
@font-face {
  font-weight: 500;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-medium-normal.eot");
  src: url("../../fonts/fsemeric-medium-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-medium-normal.woff") format("woff"), url("../../fonts/fsemeric-medium-normal.svg#fsemeric-medium-normal") format("svg");
}
@font-face {
  font-weight: 400;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-regular-normal.eot");
  src: url("../../fonts/fsemeric-regular-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-regular-normal.woff") format("woff"), url("../../fonts/fsemeric-regular-normal.svg#fsemeric-regular-normal") format("svg");
}
@font-face {
  font-weight: 300;
  font-family: "fsemeric";
  font-style: normal;
  src: url("../../fonts/fsemeric-light-normal.eot");
  src: url("../../fonts/fsemeric-light-normal.eot?#iefix") format("embedded-opentype"), url("../../fonts/fsemeric-light-normal.woff") format("woff"), url("../../fonts/fsemeric-light-normal.svg#fsemeric-light-normal") format("svg");
}
:root {
  --color-hero: radial-gradient(
    circle at 100% 0%,
    var(--color-primary),
    var(--color-secondary)
  );
  --color-heading: radial-gradient(
    100% 108.16% at 100% 0%,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  --color-button: radial-gradient(
    100% 108.16% at 100% 0%,
    var(--color-primary) 0%,
    var(--color-secondary) 100%
  );
  --color-section: radial-gradient(
    circle at 100% 0%,
    var(--color-primary),
    var(--color-secondary)
  );
  --color-navigation: radial-gradient(
    var(--color-primary),
    var(--color-secondary)
  );
}

* {
  margin: 0;
  padding: 0;
}

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

body {
  box-sizing: border-box;
  font-family: "fsemeric";
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--med-color-neutral-2));
}

::-webkit-scrollbar-thumb {
  background-color: hsl(var(--med-color-neutral-4));
  border-radius: 5px;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
}
a:focus {
  outline: none;
}

html {
  scroll-behavior: smooth;
}

.heading {
  color: transparent;
  text-align: center;
  background-image: var(--color-heading);
  -webkit-background-clip: text;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.accordion-list .accordion {
  margin-bottom: 8px;
}

.accordion {
  overflow: hidden;
}
.accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px 24px;
  background-color: hsl(var(--med-color-neutral-1));
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
.accordion__title {
  text-align: start;
}
.accordion__content {
  max-height: 0;
  padding: 0 8px;
  transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
}
.accordion__icon {
  height: 24px;
  width: 24px;
  min-width: 24px;
  stroke: hsl(var(--med-color-neutral-10));
  transition: transform 0.3s ease-in-out;
}
.accordion__list {
  list-style: initial;
}
.accordion__item {
  margin-left: 24px;
}
.accordion__item--subitem {
  margin-left: 48px;
}

/**
* state
**/
.accordion.open .accordion__icon {
  transform: rotate(180deg);
}
.accordion.open .accordion__content {
  padding: 24px 8px;
}

.button {
  --border: none;
  --color: hsl(var(--med-color-neutral-1));
  --width: fit-content;
  background: var(--color-button);
}

.card {
  --height: 248px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: var(--height);
  padding: 24px;
  background-color: hsl(var(--med-color-neutral-1));
  border-radius: 8px;
}
.card--main {
  --height: auto;
  justify-content: initial;
}
.card--main .card__header {
  margin-bottom: 24px;
}
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card__icon {
  height: 48px;
  width: 48px;
  min-width: 48px;
  stroke: hsl(var(--med-color-neutral-9));
  fill: transparent;
  align-self: flex-start;
}
.card__icon--fill {
  fill: hsl(var(--med-color-neutral-9));
}
.card__list {
  list-style: initial;
}
.card__item {
  margin: 0 0 24px 24px;
}
.card__button {
  margin: 24px auto 0 auto;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 400px;
  padding: 16px;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
.hero__container {
  text-align: center;
}
.hero__heading {
  padding-top: 46px;
}

.clm .hero {
  background-image: url("../../images/bg_CLM.svg"), var(--color-hero);
}

.cir .hero {
  background-image: url("../../images/bg_CIR.svg"), var(--color-hero);
}

.go .hero {
  background-image: url("../../images/bg_GO.svg"), var(--color-hero);
}

.pre .hero {
  background-image: url("../../images/bg_PRE.svg"), var(--color-hero);
}

.ped .hero {
  background-image: url("../../images/bg_PED.svg"), var(--color-hero);
}

.outros .hero {
  background-image: url("../../images/bg_OUTROS.svg"), var(--color-hero);
}

.nopapo .hero {
  background-image: url("../../images/bg_NOPAPO.svg"), var(--color-hero);
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  visibility: hidden;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s;
}
.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
}
.modal__content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 90vh;
  height: 55vh;
  overflow: hidden;
  background-color: #fff;
  cursor: initial;
}
@media (max-width: 768px) {
  .modal__content {
    width: 100vw;
    height: 100vh;
  }
}
.modal__content--windows .modal__paragrafos--window {
  display: block;
}
.modal__content--windows .modal__paragrafos--mobile {
  display: none;
}
.modal__content--windows .modal__download--window {
  display: flex;
}
.modal__content--windows .modal__download--mobile {
  display: none;
}
.modal__content--mobile .modal__paragrafos--window {
  display: none;
}
.modal__content--mobile .modal__paragrafos--mobile {
  display: block;
}
.modal__content--mobile .modal__download--window {
  display: none;
}
.modal__content--mobile .modal__download--mobile {
  display: flex;
}
.modal__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px;
}
.modal__close {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
}
.modal__icon-close {
  width: 24px;
  height: 24px;
  stroke: hsl(var(--med-color-neutral-10));
}
.modal__body {
  padding: 16px;
  overflow: auto;
}
.modal__button-container {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 24px;
}
.modal__button {
  padding: 12px 16px;
  white-space: nowrap;
  text-transform: uppercase;
  background-color: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}
.modal__button:hover {
  color: var(--color-primary);
}
.modal__button--active {
  color: var(--color-primary);
}
.modal__requisitos {
  margin-bottom: 24px;
  overflow: auto;
}
.modal__heading {
  margin-bottom: 24px;
}
.modal__text:not(:last-child) {
  margin-bottom: 8px;
}
.modal__bold {
  font-weight: 600;
}
.modal__download-container {
  display: flex;
}
@media (max-width: 576px) {
  .modal__download-container {
    flex-direction: column;
    align-items: flex-start;
  }
}
.modal__download {
  display: flex;
  align-items: center;
  padding: 12px 16px;
  white-space: nowrap;
  text-transform: uppercase;
  background-color: hsl(var(--med-color-neutral-2));
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}
.modal__download:not(:last-child) {
  margin-right: 16px;
}
.modal__download:hover {
  color: hsl(var(--med-color-neutral-1));
  background-color: var(--color-primary);
}
.modal__download:hover .modal__icon {
  fill: hsl(var(--med-color-neutral-1));
  stroke: hsl(var(--med-color-neutral-1));
}
@media (max-width: 576px) {
  .modal__download:not(:last-child) {
    margin-right: 0;
    margin-bottom: 16px;
  }
}
.modal__icon {
  width: 24px;
  height: 24px;
  margin-right: 16px;
  transition: all 0.3s;
  fill: hsl(var(--med-color-neutral-9));
  stroke: hsl(var(--med-color-neutral-9));
}

.open {
  visibility: visible;
  opacity: 1;
  pointer-events: initial;
}

.nav__list {
  display: flex;
  gap: 16px;
}
@media (max-width: 576px) {
  .nav__list {
    gap: 8px;
  }
}
.nav__link {
  display: flex;
  align-items: center;
  max-height: 40px;
  padding: 12px 16px;
  white-space: nowrap;
  text-transform: uppercase;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 300ms ease-in-out;
}
.nav__link:hover {
  background-color: hsl(var(--med-color-neutral-2));
}
@media (max-width: 768px) {
  .nav__link {
    padding: 12px 0;
  }
}
.nav__icon {
  width: 24px;
  height: 24px;
  margin-left: 24px;
  stroke: hsl(var(--med-color-neutral-7));
}
.nav__menu-icon {
  width: 24px;
  height: 24px;
  stroke: hsl(var(--med-color-neutral-9));
}

/**
* state
**/
.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  padding: 24px 16px 40px 16px;
  background: hsl(var(--med-color-neutral-4));
}
.footer__contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
}
.footer__editora {
  margin-bottom: 4px;
  text-align: center;
}
.footer__direitos {
  text-align: center;
}

.header {
  position: fixed;
  z-index: 1;
  width: 100%;
  background: #fff;
}
.header__container {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: 1287px;
  margin: 0 auto;
  padding: 8px 16px 16px;
}
@media (max-width: 1200px) {
  .header__container {
    align-items: center;
    padding: 8px;
  }
}
.header__logo {
  height: 80px;
}
@media (max-width: 1200px) {
  .header__logo {
    height: 50px;
  }
}
@media (max-width: 768px) {
  .header__logo {
    display: none;
  }
}
.header__nav {
  margin-left: auto;
  /* &--desktop {
    @media (max-width: map.get($breakpoints, xl)) {
      display: none;
    }
  } */
}
@media (max-width: 768px) {
  .header__nav {
    margin: 0 auto;
  }
}
.header__button {
  position: relative;
  z-index: 1;
  z-index: 2;
  display: none;
  width: 3rem;
  height: 3rem;
  margin-left: auto;
  background-color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
@media (max-width: 1200px) {
  .header__button {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.main {
  padding-top: 104px;
}
@media (max-width: 1200px) {
  .main {
    padding-top: 66px;
  }
}
@media (max-width: 768px) {
  .main {
    padding-top: 56px;
  }
}

.section-medsoft {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  background-color: hsl(var(--med-color-neutral-2));
}
.section-medsoft__button {
  margin-bottom: 24px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.section-medsoft__heading {
  padding-bottom: 24px;
}

.section-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 120px 16px;
}
.section-media__container {
  max-width: 816px;
  margin: 0 auto;
}
.section-media__iframe {
  padding-bottom: 24px;
}
.section-media__button {
  padding-bottom: 24px;
}
.section-media__heading {
  padding-bottom: 24px;
}

.section-novidades {
  padding: 104px 16px;
  background-color: hsl(var(--med-color-neutral-2));
}
@media (max-width: 1200px) {
  .section-novidades {
    padding: 124px 16px;
  }
}
.section-novidades__container {
  max-width: 1232px;
  margin: 0 auto;
}
.section-novidades__heading {
  padding-bottom: 48px;
}
.section-novidades__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  padding: 48px 0;
}
@media (max-width: 992px) {
  .section-novidades__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .section-novidades__grid {
    grid-template-columns: repeat(1, 1fr);
  }
}
.section-novidades__highlight {
  color: #000;
  text-align: center;
}

.section-highlight {
  padding: 64px 16px;
  background: var(--color-section);
}
.section-highlight__container {
  display: flex;
  align-items: center;
  max-width: 998px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .section-highlight__container {
    flex-direction: column;
  }
}
@media (max-width: 1200px) {
  .section-highlight__image {
    width: 40%;
  }
}
@media (max-width: 768px) {
  .section-highlight__image {
    width: 50%;
    margin-bottom: 64px;
  }
}
@media (max-width: 576px) {
  .section-highlight__image {
    width: 60%;
  }
}
.section-highlight__heading {
  padding-bottom: 24px;
}
.section-highlight__content {
  padding-left: 64px;
}
@media (max-width: 768px) {
  .section-highlight__content {
    padding-left: 0;
  }
}

.section-conteudo {
  padding: 104px 16px;
  background-color: hsl(var(--med-color-neutral-2));
}
.section-conteudo__container {
  max-width: 848px;
  margin: 0 auto;
}
.section-conteudo__heading {
  padding-bottom: 48px;
}

.section-inscrever {
  padding: 72px 16px 64px 16px;
}
.section-inscrever__container {
  max-width: 869px;
  margin: 0 auto;
}
.section-inscrever__card {
  --height: auto;
  min-height: 208px;
  background-color: hsl(var(--med-color-neutral-2));
}
.section-inscrever__card .card__heading {
  text-align: center;
}