Сделайте песочницу с видимой проблемой на codepen.io
Пока делаете, возможно, разберетесь в чем дело.
Также можно почитать про z-index и контекст наложения, дело, скорее всего, в них.
Антон Антон, да, разумеется, для use без разницы. Суть как раз в расширении спектра использования.
В большинстве случаев это дает возможность убрать мусор из разметки.
Про сборщики не поняла мысли. Что для стеков их меньше? Ну и ладно, достаточно одного рабочего.
Супер вариант: перестать использовать для этого тег <i>, который предназначен вообще не для этого.
Заменить на псевдо с фоном или просто фон.
Возможно, хватит display: inline-block и vertical-align:middle для i. Но вы не показали какие у него там стили сейчас. (Обычно они у таких библиотек подустаревшие).
Лучше всего делать песочницу с демонстрацией проблемы на сервисах типа codepen.io, чтобы нам не нужно было играть в угадайку.
Либо флекс и align-items
И лучше бы не задавать кнопке жесткую высоту, а попадать в неё паддингами. Если никак, то минимальную.
boxFight,
1. Упростить градиент в Фигме
2. Экспортировать как png (svg, возможно, выйдет тяжелее)
3. Подобрать значения градиента опираясь на эту или другую статью css.yoksel.ru/radial-gradients
Например, как советует Полина в ответе.
4. Использовать псевдоэлемент и поворачивать его как хочется.
К той формулировке, в которой вопрос сейчас, ответ будет довольно идиотским: не вращайте его.
Если добавите подробностей: опишете чего ждете (скрин и/или фигма), что не так в результате (скрин, песочницу на jsfiddle или codepen), глядишь и ответы получше пойдут
Сетка однородных элементов такая?
Я бы взглянула на макет.
как-то вы хитро подточили все под конкретное значение, я изменил переменную --fix и все сломалось.
Да, в одном месте забыла заменить 100 на кастомку, поправила
Но и в этом случае будут проблемы, если места останется мало.
И нужно кроме calc, туда ещё min() или max() вставить.
Но я и написала, что это демонстрация сути вычислений, дорабатывайте самостоятельно.
Уберите -> выпадет.