comp-button {
    display: grid;
    width: max-content;
    height: max-content;
    position: relative;
}

comp-button button {
    display: inline-flex;
    width: auto;
    height: 40px;
    padding: var(--spacing-space-3, 8px) var(--spacing-space-5, 16px);
    margin: 0;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-space-3, 8px);
    flex-shrink: 0;
    border-radius: var(--spacing-space-3, 8px);
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
    font: var(--font-body-strong);
    transition: width 200ms ease-out;
}

comp-button button i {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

comp-button button:has(i.first:not([style*="display: none"])){
    padding-left: 12px;
}

comp-button button:has(i.last:not([style*="display: none"])){
    padding-right: 12px;
}

comp-button button.compact {
    height: 32px;
    padding: var(--spacing-space-2, 4px) var(--spacing-space-4, 12px);
}

comp-button button.compact:has(i.first) {
    padding-left: 8px;
}

comp-button button.compact:has(i.last) {
    padding-right: 8px;
}

comp-button button i.loading {
    display: none;
}

comp-button[loading] button {
    cursor: default;
    pointer-events: none;
    transition: width 150ms ease-out;
}

comp-button[loading] button i.icon-to-hide {
    display: none;
}

comp-button[loading] button:has(i.loading:not([style*="display: none"]) ~ i.last) {
    padding-right: 16px;
}

comp-button[loading] button.compact:has(i.loading:not([style*="display: none"]) ~ i.last) {
    padding-right: 12px;
}

/* Filled y antiguo Main */
comp-button button.filled,
comp-button button.main {
    background: var(--color-primary-600, #0E55B9);
    color: var(--color-neutral-0, #ffffff);
    border: none;
}

comp-button button.filled:hover,
comp-button button.main:hover {
    background: var(--color-primary-700, #164FA1);
}

comp-button button.filled:active,
comp-button button.main:active {
    background: var(--color-primary-800, #163A79);
}

comp-button:not([loading]) button.filled:disabled,
comp-button:not([loading]) button.main:disabled {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-400, #8CA2B5);
    cursor: not-allowed;
}

a:focus-visible comp-button button.filled,
a:focus-visible comp-button button.main,
comp-button button.filled:focus-visible,
comp-button button.main:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
}

/* Danger Filled */
comp-button button.filled.danger,
comp-button button.main.danger {
    background: var(--color-danger-600, #D82525);
}

comp-button button.filled.danger:hover,
comp-button button.main.danger:hover {
    background: var(--color-danger-700, #BA1B1B);
}

comp-button button.filled.danger:active,
comp-button button.main.danger:active {
    background: var(--color-danger-800, #9C1313);
}

comp-button:not([loading]) button.filled.danger:disabled,
comp-button:not([loading]) button.main.danger:disabled {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-400, #8CA2B5);
    cursor: not-allowed;
}

a:focus-visible comp-button button.filled.danger,
a:focus-visible comp-button button.main.danger,
comp-button button.filled.danger:focus-visible,
comp-button button.main.danger:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-danger-700, #BA1B1B);
}

a:focus-visible:active comp-button button.filled.danger,
a:focus-visible:active comp-button button.main.danger,
comp-button button.filled.danger:focus-visible:active,
comp-button button.main.danger:focus-visible:active {
    background: var(--color-danger-800, #9C1313);
}

/* Tonal o contour*/
comp-button button.tonal,
comp-button button.contour {
    border: 1px solid var(--color-primary-200, #D8F0FE);
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-700, #164FA1);
}

comp-button button.tonal:hover,
comp-button button.contour:hover {
    border: 1px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-200, #D8F0FE);
}

comp-button button.tonal:active,
comp-button button.contour:active {
    border: 1px solid var(--color-primary-400, #8CC9FD);
    background: var(--color-primary-300, #B2DFFE);
}

comp-button:not([loading]) button.tonal:disabled,
comp-button:not([loading]) button.contour:disabled {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background-color: transparent;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.tonal,
a:focus-visible comp-button button.contour,
comp-button button.tonal:focus-visible,
comp-button button.contour:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    border: 1px solid var(--color-neutral-0, #FFF);
    background: var(--color-primary-200, #D8F0FE);
}

a:focus-visible:active comp-button button.tonal,
a:focus-visible:active comp-button button.contour,
comp-button button.tonal:focus-visible:active,
comp-button button.contour:focus-visible:active {
    background: var(--color-primary-300, #B2DFFE);
}

/* Danger Tonal o danger contour */
comp-button button.tonal.danger,
comp-button button.contour.danger {
    border: 1px solid var(--color-danger-200, #FDD3D3);
    background: var(--color-danger-100, #FFF1F0);
    color: var(--color-danger-600, #D82525)
}

comp-button button.tonal.danger:hover,
comp-button button.contour.danger:hover {
    border: 1px solid var(--color-danger-300, #FBACAC);
    background: var(--color-danger-200, #FDD3D3);
}

comp-button button.tonal.danger:active,
comp-button button.contour.danger:active {
    border: 1px solid var(--color-danger-400, #F48585);
    background: var(--color-danger-300, #FBACAC);
}

comp-button:not([loading]) button.tonal.danger:disabled,
comp-button:not([loading]) button.contour.danger:disabled {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background: transparent;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.tonal.danger,
a:focus-visible comp-button button.contour.danger,
comp-button button.tonal.danger:focus-visible,
comp-button button.contour.danger:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    border: 1px solid var(--color-neutral-0, #FFF);
}

/* Text */
comp-button button.text {
    border: none;
    background: transparent;
    color: var(--color-primary-600, #0E55B9);
}

comp-button button.text:hover {
    color: var(--color-primary-700, #164FA1);
    background: var(--color-primary-200, #D8F0FE);
}

comp-button button.text:active {
    color: var(--color-primary-700, #164FA1);
    background: var(--color-primary-300, #B2DFFE);
}

comp-button:not([loading]) button.text:disabled {
    color: var(--color-neutral-300, #B7C9DF);
    background: transparent;
    cursor: not-allowed;
}

a:focus-visible comp-button button.text,
comp-button button.text:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-primary-100, #F0F9FF);
}

a:focus-visible:active comp-button button.text,
comp-button button.text:focus-visible:active {
    color: var(--color-primary-700, #164FA1);
    background: var(--color-primary-300, #B2DFFE);
}

/* Danger Text */
comp-button button.text.danger {
    border: none;
    background: transparent;
    color: var(--color-danger-600, #D82525);
}

comp-button button.text.danger:hover {
    color: var(--color-danger-600, #D82525);
    background: var(--color-danger-100, #FFF1F0);
}

comp-button button.text.danger:active {
    color: var(--color-danger-700, #BA1B1B);
    background: var(--color-danger-200, #FDD3D3);
}

comp-button:not([loading]) button.text.danger:disabled {
    color: var(--color-neutral-300, #B7C9DF);
    background: transparent;
    cursor: not-allowed;
}

a:focus-visible comp-button button.text.danger,
comp-button button.text.danger:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-danger-100, #FFF1F0);
}

a:focus-visible:active comp-button button.text.danger,
comp-button button.text.danger:focus-visible:active {
    color: var(--color-danger-700, #BA1B1B);
    background: var(--color-danger-200, #FDD3D3);
}

/* Link */
comp-button button.link {
    border: none;
    background: transparent;
    color: var(--color-neutral-600, #425567);
    padding: var(--spacing-space-0, 0px);
    height: unset;
}

comp-button button.link span {
    text-decoration-line: underline;
}

comp-button button.link:hover {
    color: var(--color-primary-600, #0E55B9);
}

comp-button button.link:active {
    color: var(--color-primary-800, #163A79);
}

comp-button button.link:disabled {
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.link,
comp-button button.link:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    color: var(--color-primary-600, #0E55B9);
}

a:focus-visible:active comp-button button.link,
comp-button button.link:focus-visible:active {
    color: var(--color-primary-800, #163A79);
}

a:visited comp-button button.link {
    color: var(--color-complementary-a-700, #3F18CF);
}

comp-button button.link:has(i.first),
comp-button button.link:has(i.last) {
    padding: 0;
}

/* Danger - link */
comp-button button.link.danger {
    color: var(--color-danger-600, #D82525);
    border-radius: var(--border-radius-corner-s, 4px);
    ;
}

comp-button button.link.danger:hover {
    color: var(--color-danger-700, #BA1B1B);
}

comp-button button.link.danger:active {
    color: var(--color-danger-800, #9C1313);
}

comp-button button.link.danger:disabled {
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.link.danger,
comp-button button.link.danger:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    color: var(--color-danger-700, #BA1B1B);
}

a:focus-visible:active comp-button button.link.danger,
comp-button button.link.danger:focus-visible:active {
    color: var(--color-danger-800, #9C1313);
}

a:visited comp-button button.link.danger {
    color: var(--color-complementary-a-800, #2E11AD);
}

/* icon button */
comp-button button.icon {
    width: 40px;
    height: 40px;
    padding: var(--spacing-space-3, 8px) !important;
}

comp-button button.icon.compact,
comp-button button.icon.medium,
comp-button button.medium {
    width: 32px;
    height: 32px;
    padding: var(--spacing-space-2, 4px) !important;
}

/* icon no-filled */
comp-button button.icon.no-filled {
    border: none;
    background: transparent;
    color: var(--color-primary-600, #0E55B9);
}

comp-button button.icon.no-filled:hover {
    background: var(--color-primary-100, #F0F9FF);
}

comp-button button.icon.no-filled:active {
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
}

comp-button:not([loading]) button.icon.no-filled:disabled {
    background: transparent;
    border: none;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.icon.no-filled,
comp-button button.icon.no-filled:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-primary-100, #F0F9FF);
}

a:focus-visible:active comp-button button.icon.no-filled,
comp-button button.icon.no-filled:focus-visible:active {
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
}

/* icon no-filled danger*/
comp-button button.icon.no-filled.danger {
    border: none;
    background: transparent;
    color: var(--color-danger-600, #D82525);
}

comp-button button.icon.no-filled.danger:hover {
    background: var(--color-danger-100, #FFF1F0);
}

comp-button button.icon.no-filled.danger:active {
    background: var(--color-danger-200, #FDD3D3);
    color: var(--color-danger-700, #BA1B1B);
}

comp-button:not([loading]) button.icon.no-filled.danger:disabled {
    background: transparent;
    border: none;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.icon.no-filled.danger,
comp-button button.icon.no-filled.danger:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-danger-100, #FFF1F0);
}

a:focus-visible:active comp-button button.icon.no-filled.danger,
comp-button button.icon.no-filled.danger:focus-visible:active {
    background: var(--color-danger-200, #FDD3D3);
    color: var(--color-danger-700, #BA1B1B);
}

/* icon subtle */
comp-button button.icon.subtle {
    border: none;
    background: transparent;
    color: var(--color-neutral-600, #425567)
}

comp-button button.icon.subtle:hover {
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-700, #314254);
}

comp-button button.icon.subtle:active {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-700, #314254);
}

comp-button:not([loading]) button.icon.subtle:disabled {
    background: transparent;
    border: none;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

a:focus-visible comp-button button.icon.subtle,
comp-button button.icon.subtle:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-neutral-100, #F3F4F7);
}

a:focus-visible:active comp-button button.icon.subtle,
comp-button button.icon.subtle:focus-visible:active {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-700, #314254);
}

/* botton toogle */
comp-button button.toggle {
    width: 40px;
    height: 40px;
    padding: var(--spacing-space-3, 8px) !important;
}

comp-button button.toggle.compact {
    width: 32px;
    height: 32px;
    padding: var(--spacing-space-2, 4px) !important;
}

comp-button button.toggle {
    border: none;
    background: transparent;
    color: var(--color-neutral-600, #425567)
}

comp-button button.toggle:hover {
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-700, #314254);
}

comp-button button.toggle:active {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-800, #263645);
    border: none;
}

comp-button button.toggle:disabled {
    background: transparent;
    border: none;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

comp-button button.toggle:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 1px;
    background: var(--color-neutral-100, #F3F4F7);
    border: none;
}

comp-button button.toggle:focus-visible:active {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-800, #263645);
    border: none;
}

comp-button button.toggle comp-badge{
    display: none;
}

/* toggle active */
comp-button[active] button.toggle {
    border: none;
    background: transparent;
    color: var(--color-primary-600, #0E55B9);
}

comp-button[active] button.toggle comp-badge{
    display: flex;
    right: 0;
    top: 0;
}
comp-button[active] button.toggle.compact comp-badge{
    right: -4px;
    top: -4px;
}

comp-button[active] button.toggle i::before {
    font-family: "Phosphor-Fill" !important;
}

comp-button[active] button.toggle:hover {
    outline: 1px solid var(--color-primary-200, #D8F0FE);
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-700, #164FA1);
}

comp-button[active] button.toggle:active {
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
    outline: none;
}

comp-button[active] button.toggle:active comp-badge{
    display: none;
}

comp-button[active] button.toggle:disabled {
    background: transparent;
    outline: none;
    color: var(--color-neutral-300, #B7C9DF);
    cursor: not-allowed;
}

comp-button[active] button.toggle:focus-visible {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 0;
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-700, #164FA1);
    border: 1px solid var(--color-primary-200, #D8F0FE);
}

comp-button[active] button.toggle.compact:focus-visible {
    border: none;
}   

comp-button[active] button.toggle:focus-visible:active {
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
}


/* estilos button navbar */
comp-button button.navbar-search,
comp-button button.navbar-main,
comp-button button.navbar-notification {
    width: 40px;
    height: 40px;
    padding: 8px;
    background-color: transparent;
    color: var(--color-neutral-500, #566A80);
    border-radius: 8px;
    font-size: 20px !important;
    flex-shrink: 0;
    border: none;
}

comp-button button.navbar-search {
    border: 1px solid var(--color-neutral-200, #D5DFEC);
}

comp-button button.navbar-search:hover:not(:disabled) {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
    background: var(--color-neutral-100, #F3F4F7);
}

comp-button button.navbar-search:active:not(:disabled),
comp-button button.navbar-search.pressed:not(:disabled) {
    border: 1px solid var(--color-neutral-400, #8CA2B5);
    background: var(--color-neutral-200, #D5DFEC);
}

comp-button button.navbar-search:focus-visible:not(:disabled),
a:focus-visible comp-button button.navbar-search:not(:disabled) {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
    background: var(--color-neutral-100, #F3F4F7);
}

comp-button button.navbar-search:focus-visible:hover:not(:disabled),
a:focus-visible comp-button button.navbar-search:hover:not(:disabled) {
    border: 1px solid var(--color-neutral-300, #B7C9DF);
}

comp-button button.navbar-search:focus-visible:active:not(:disabled),
comp-button button.navbar-search:focus-visible.pressed:not(:disabled),
a:focus-visible comp-button button.navbar-search:active:not(:disabled),
a:focus-visible comp-button button.navbar-search.pressed:not(:disabled) {
    background: var(--color-neutral-200, #D5DFEC);
}

comp-button button.navbar-search:disabled {
    color: var(--color-neutral-100);
    background-color: transparent;
    cursor: not-allowed;
}

/*  */
comp-button button.navbar-main:hover:not(:disabled) {
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-600, #425567);
}

comp-button button.navbar-main:active:not(:disabled),
comp-button button.navbar-main.pressed:not(:disabled) {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-700, #314254);
}
comp-button button.navbar-main.pressed:not(:disabled) i {
    font-family: "Phosphor-fill" !important;
}

comp-button button.navbar-main:focus-visible:not(:disabled),
a:focus-visible comp-button button.navbar-main:not(:disabled) {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: -2px;
    background: var(--color-neutral-100, #F3F4F7);
}

comp-button button.navbar-main:focus-visible:active:not(:disabled),
comp-button button.navbar-main:focus-visible.pressed:not(:disabled),
a:focus-visible comp-button button.navbar-main:active:not(:disabled),
a:focus-visible comp-button button.navbar-main.pressed:not(:disabled) {
    background: var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-700, #314254);
}

comp-button button.navbar-main:disabled {
    color: var(--color-neutral-100);
    background-color: transparent;
    cursor: not-allowed;
}

comp-button[active] button.navbar-main {
    border: none;
    color: var(--color-primary-600);
    background: var(--color-primary-100, #F0F9FF);
    position: relative;
    border: 1px solid var(--color-primary-200, #D8F0FE);
}

comp-button[active] button.navbar-main i {
    font-family: "Phosphor-fill" !important;
}

comp-button[active] button.navbar-main::before {
    content: '';
    position: absolute;
    bottom: -4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-secondary-600, #FB8C04);
    border-radius: 50%;
}

comp-button[active] button.navbar-main:hover:not(:disabled) {
    border: 1.5px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
}

comp-button[active] button.navbar-main:active:not(:disabled),
comp-button[active] button.navbar-main.pressed:not(:disabled) {
    border: 1.5px solid var(--color-primary-400, #8CC9FD);
    background: var(--color-primary-300, #B2DFFE);
    color: var(--color-primary-800, #163A79);
}

comp-button[active] button.navbar-main:focus-visible,
comp-button[active] button.navbar-main.pressed:focus-visible {
    border: 1.5px solid var(--color-primary-300, #B2DFFE);
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 0px;
    background: var(--color-primary-200, #D8F0FE);
}

/*  */
comp-button button.navbar-notification:not(:disabled) {
    color: var(--color-neutral-500, #566A80);
}

comp-button button.navbar-notification:hover:not(:disabled) {
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-600, #425567);
}

comp-button button.navbar-notification:active:not(:disabled),
comp-button button.navbar-notification.pressed:not(:disabled) {
    background: var(--color-neutral-200, #D5DFEC);
    border: none;
    color: var(--color-neutral-700, #314254);
}

comp-button button.navbar-notification:focus-visible:not(:disabled),
a:focus-visible comp-button button.navbar-notification:not(:disabled) {
    outline: 2px solid var(--color-neutral-400, #8CA2B5);
    outline-offset: 0px;
    border: 1px solid var(--color-neutral-0);
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-600, #425567);
}
comp-button button.navbar-notification:focus-visible:hover:not(:disabled),
a:focus-visible:hover comp-button button.navbar-notification:not(:disabled) {
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    background: var(--color-neutral-100, #F3F4F7);
    color: var(--color-neutral-600, #425567);
}
comp-button button.navbar-notification:focus-visible:active:not(:disabled),
a:focus-visible comp-button button.navbar-notification:active:not(:disabled) {
    background: var(--color-neutral-200, #D5DFEC);
    border: 1px solid var(--color-neutral-200, #D5DFEC);
    color: var(--color-neutral-700, #314254);
}

comp-button button.navbar-notification:disabled {
    color: var(--color-neutral-100);
    background-color: transparent;
    cursor: not-allowed;
}

comp-button[active] button.navbar-notification {
    border: none;
    color: var(--color-primary-600);
    background: transparent;
    position: relative;
}

comp-button[active] button.navbar-notification i {
    font-family: "Phosphor-fill" !important;
}

comp-button[active] button.navbar-notification:hover:not(:disabled) {
    outline: 1px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-600);
    border: none;
}

comp-button[active] button.navbar-notification:active:not(:disabled) {
    outline: 1px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
    border: none;
}

comp-button[active] button.navbar-notification:focus-visible:not(:disabled),
a:focus-visible comp-button[active] button.navbar-notification:not(:disabled) {
    outline: 1px solid var(--color-primary-200, #D8F0FE);
    outline-offset: -1px;
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-600, #0E55B9);
    box-shadow: 0px 0px 0px 2px var(--color-neutral-400, #8CA2B5);
    border: none;
}
comp-button[active] button.navbar-notification:focus-visible:hover:not(:disabled),
a:focus-visible:hover comp-button[active] button.navbar-notification:not(:disabled) {
    outline: 1px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-100, #F0F9FF);
    color: var(--color-primary-600);
    border: none;
}
comp-button[active] button.navbar-notification:focus-visible:active:not(:disabled),
a:focus-visible comp-button[active] button.navbar-notification:active:not(:disabled) {
    outline: 1px solid var(--color-primary-300, #B2DFFE);
    background: var(--color-primary-200, #D8F0FE);
    color: var(--color-primary-700, #164FA1);
    border: none;
}
comp-button[active] button.navbar-notification::before {
    content: '';
    position: absolute;
    right: 5px;
    top: 5px;
    width: 8px;
    height: 8px;
    background-color: var(--color-secondary-600, #FB8C04);
    border-radius: 50%;
}
comp-button button comp-progress[data-type='circle']{
    width: 20px;
    height: 20px;
}