/* Базовый класс для всех иконок */
.icon {
    display: inline-block;
    width: 1.5em;  /* Размер автоматически подстраивается под размер шрифта */
    height: 1.5em;
    vertical-align: middle; /* Выравнивание по центру строки с текстом */

    /* 🌟 Главный секрет: цвет маски (иконки) всегда равен цвету текста */
    background-color: currentColor;

    /* Стандартные настройки для масок */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;

    transition: color 0.2s ease; /* Плавная смена цвета при ховере */
}

/* Класс для конкретной иконки Уведомления */
.icon-notification {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNMTYwLTIwMHYtODBoODB2LTI4MHEwLTgzIDUwLTE0Ny41VDQyMC03OTJ2LTI4cTAtMjUgMTcuNS00Mi41VDQ4MC04ODBxMjUgMCA0Mi41IDE3LjVUNTQwLTgyMHYyOHE4MCAyMCAxMzAgODQuNVQ3MjAtNTYwdjI4MGg4MHY4MEgxNjBabTMyMC0zMDBabTAgNDIwcS0zMyAwLTU2LjUtMjMuNVQ0MDAtMTYwaDE2MHEwIDMzLTIzLjUgNTYuNVQ0ODAtODBaTTMyMC0yODBoMzIwdi0yODBxMC02Ni00Ny0xMTN0LTExMy00N3EtNjYgMC0xMTMgNDd0LTQ3IDExM3YyODBaIi8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNMTYwLTIwMHYtODBoODB2LTI4MHEwLTgzIDUwLTE0Ny41VDQyMC03OTJ2LTI4cTAtMjUgMTcuNS00Mi41VDQ4MC04ODBxMjUgMCA0Mi41IDE3LjVUNTQwLTgyMHYyOHE4MCAyMCAxMzAgODQuNVQ3MjAtNTYwdjI4MGg4MHY4MEgxNjBabTMyMC0zMDBabTAgNDIwcS0zMyAwLTU2LjUtMjMuNVQ0MDAtMTYwaDE2MHEwIDMzLTIzLjUgNTYuNVQ0ODAtODBaTTMyMC0yODBoMzIwdi0yODBxMC02Ni00Ny0xMTN0LTExMy00N3EtNjYgMC0xMTMgNDd0LTQ3IDExM3YyODBaIi8+PC9zdmc+");
}

.icon-refresh {
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNMjA0LTMxOHEtMjItMzgtMzMtNzh0LTExLTgycTAtMTM0IDkzLTIyOHQyMjctOTRoN2wtNjQtNjQgNTYtNTYgMTYwIDE2MC0xNjAgMTYwLTU2LTU2IDY0LTY0aC03cS0xMDAgMC0xNzAgNzAuNVQyNDAtNDc4cTAgMjYgNiA1MXQxOCA0OWwtNjAgNjBaTTQ4MS00MCAzMjEtMjAwbDE2MC0xNjAgNTYgNTYtNjQgNjRoN3ExMDAgMCAxNzAtNzAuNVQ3MjAtNDgycTAtMjYtNi01MXQtMTgtNDlsNjAtNjBxMjIgMzggMzMgNzh0MTEgODJxMCAxMzQtOTMgMjI4dC0yMjcgOTRoLTdsNjQgNjQtNTYgNTZaIi8+PC9zdmc+");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAtOTYwIDk2MCA5NjAiIHdpZHRoPSIyNHB4IiBmaWxsPSIjNWY2MzY4Ij48cGF0aCBkPSJNMjA0LTMxOHEtMjItMzgtMzMtNzh0LTExLTgycTAtMTM0IDkzLTIyOHQyMjctOTRoN2wtNjQtNjQgNTYtNTYgMTYwIDE2MC0xNjAgMTYwLTU2LTU2IDY0LTY0aC03cS0xMDAgMC0xNzAgNzAuNVQyNDAtNDc4cTAgMjYgNiA1MXQxOCA0OWwtNjAgNjBaTTQ4MS00MCAzMjEtMjAwbDE2MC0xNjAgNTYgNTYtNjQgNjRoN3ExMDAgMCAxNzAtNzAuNVQ3MjAtNDgycTAtMjYtNi01MXQtMTgtNDlsNjAtNjBxMjIgMzggMzMgNzh0MTEgODJxMCAxMzQtOTMgMjI4dC0yMjcgOTRoLTdsNjQgNjQtNTYgNTZaIi8+PC9zdmc+");
}

/* Пример добавления другой иконки (например, профиля) */
.icon-user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M6 20a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='8' r='4' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M6 20a6 6 0 0 1 12 0'/%3E%3C/svg%3E");
}

.icon-arrow-left {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIj4NCiAgICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE1IDE5bC03LTcgNy03Ij48L3BhdGg+DQo8L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIj4NCiAgICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTE1IDE5bC03LTcgNy03Ij48L3BhdGg+DQo8L3N2Zz4=);
}

.icon-arrow-right {
    -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIj4NCiAgICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgNWw3IDctNyA3Ij48L3BhdGg+DQo8L3N2Zz4=);
    mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpY29uIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIj4NCiAgICA8cGF0aCBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIgZD0iTTkgNWw3IDctNyA3Ij48L3BhdGg+DQo8L3N2Zz4=);
}

.icon-calendar {
    -webkit-mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiDQogICAgIGZpbGw9Im5vbmUiDQogICAgIHN0cm9rZT0iY3VycmVudENvbG9yIg0KICAgICBzdHJva2Utd2lkdGg9IjIiDQogICAgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCINCiAgICAgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+DQogICAgPHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiLz4NCiAgICA8bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ii8+DQogICAgPGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiLz4NCiAgICA8bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCIvPg0KPC9zdmc+);
    mask-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIg0KICAgICB2aWV3Qm94PSIwIDAgMjQgMjQiDQogICAgIGZpbGw9Im5vbmUiDQogICAgIHN0cm9rZT0iY3VycmVudENvbG9yIg0KICAgICBzdHJva2Utd2lkdGg9IjIiDQogICAgIHN0cm9rZS1saW5lY2FwPSJyb3VuZCINCiAgICAgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCc+DQogICAgPHJlY3QgeD0iMyIgeT0iNCIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiByeD0iMiIgcnk9IjIiLz4NCiAgICA8bGluZSB4MT0iMTYiIHkxPSIyIiB4Mj0iMTYiIHkyPSI2Ii8+DQogICAgPGxpbmUgeDE9IjgiIHkxPSIyIiB4Mj0iOCIgeTI9IjYiLz4NCiAgICA8bGluZSB4MT0iMyIgeTE9IjEwIiB4Mj0iMjEiIHkyPSIxMCIvPg0KPC9zdmc+);
}

/* ------------------------------------------- */
/* Пример стилей для контекста (кнопки и текст) */

.btn-action {
    color: #555555; /* Текст и иконка внутри станут серыми */
}

.btn-action:hover {
    color: #ff5722; /* При наведении и текст, и иконка станут оранжевыми */
}

.alert-box {
    color: #d32f2f;  /* И текст, и иконка будут красными */
    font-size: 20px; /* Благодаря 1.2em иконка сама увеличится до 24px */
}