@layer components {
    .filter-twitter {
        filter: var(--filter-twitter);
    }

    .filter-white,
    .white-filter {
        filter: var(--white-filter);
    }

    .filter-whiteNoDark {
        filter: invert(100%) sepia(0%) saturate(7484%) hue-rotate(136deg)
            brightness(99%) contrast(104%);
    }

    .filter-lightGold {
        filter: var(--lightGold-filter);
    }

    .filter-orange {
        filter: var(--orange-filter);
    }

    .filter-lightBlue {
        filter: invert(25%) sepia(55%) saturate(3687%) hue-rotate(223deg)
            brightness(94%) contrast(93%);
    }

    .filter-textColor1 {
        filter: var(--textColor1-filter);
    }

    .filter-textColor1NoDark {
        filter: invert(10%) sepia(35%) saturate(3157%) hue-rotate(231deg)
            brightness(99%) contrast(113%);
    }

    .filter-textColor2 {
        filter: var(--textColor2-filter);
    }

    .filter-textColor3 {
        filter: var(--textColor3-filter);
    }

    .filter-textColor5 {
        filter: var(--textColor5-filter);
    }

    .filter-textColor6 {
        filter: var(--textColor6-filter);
    }

    .filter-textColor6NoDark {
        filter: invert(35%) sepia(3%) saturate(6422%) hue-rotate(208deg)
            brightness(94%) contrast(87%);
    }

    .filter-textColor7 {
        filter: var(--textColor7-filter);
    }

    .filter-healthyGreen {
        filter: invert(57%) sepia(64%) saturate(5598%) hue-rotate(92deg)
            brightness(99%) contrast(111%);
    }

    .filter-warning {
        filter: invert(67%) sepia(54%) saturate(5119%) hue-rotate(8deg)
            brightness(98%) contrast(101%);
    }
    .filter-purple {
        filter: var(--purple-filter);
    }

    .filter-danger {
        /* this is loss 2.8% */
        filter: invert(53%) sepia(16%) saturate(4455%) hue-rotate(323deg)
            brightness(84%) contrast(103%);
    }

    /* 2E8C70 */
    .filter-greenPrompt {
        filter: invert(44%) sepia(52%) saturate(498%) hue-rotate(111deg)
            brightness(94%) contrast(86%);
    }

    /* #FFD38F */
    .filter-yellowPrompt {
        filter: invert(81%) sepia(28%) saturate(678%) hue-rotate(336deg)
            brightness(105%) contrast(101%);
    }

    /* #F0F3F9 */
    .filter-aliceBlue {
        filter: invert(94%) sepia(7%) saturate(129%) hue-rotate(182deg)
            brightness(102%) contrast(96%);
    }

    /* #9D8DF7 */
    .filter-notificationBellDark {
        filter: invert(40%) sepia(48%) saturate(1566%) hue-rotate(221deg)
            brightness(99%) contrast(94%);
    }

    /* #A9A6BD */
    .filter-gray {
        filter: invert(71%) sepia(14%) saturate(317%) hue-rotate(208deg)
            brightness(93%) contrast(86%);
    }

    .filter-prominentLinkColor {
        filter: var(--c-prominent-link-icon-filter);
    }
}
