@import "./header.css";
@import "./emoji.css";
@import "./button.css";

/* =========================================================
   ICON PICKER PAGE V2
   Светлый полноэкранный выбор эмодзи
   Оформление по референсу
   ========================================================= */

:root {
    --icon-picker-bg: #f4f5f7;
    --icon-picker-surface: #ffffff;

    --icon-picker-text: #292b2f;
    --icon-picker-muted: #6c6f75;

    --icon-picker-item-bg: rgba(248, 248, 249, 0.96);
    --icon-picker-item-border: rgba(45, 47, 52, 0.08);

    --icon-picker-selected-border: #3f4146;
    --icon-picker-selected-bg: #ffffff;

    --icon-picker-button-border: rgba(50, 53, 59, 0.11);
    --icon-picker-shadow: rgba(31, 38, 49, 0.06);
}


/* =========================================================
   ОБЩИЙ ЭКРАН
   ========================================================= */

.habit-icon-picker {
    position: fixed;
    inset: 0;
    z-index: 1000;

    width: 100%;
    height: 100dvh;
    min-height: 100vh;

    display: flex;
    align-items: stretch;
    justify-content: center;

    box-sizing: border-box;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f1f2f4 0%,
            #f5f6f8 100%
        );
}


/* =========================================================
   ОСНОВНОЙ БЕЛЫЙ ЭКРАН
   ========================================================= */

.habit-icon-picker__sheet {
    position: relative;

    width: 100%;
    height: 100%;
    min-height: 0;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    overflow: hidden;

    color: var(--icon-picker-text);

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255, 255, 255, 1) 0%,
            rgba(253, 253, 254, 1) 42%,
            rgba(250, 250, 251, 1) 100%
        );

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "SF Pro Display",
        "SF Pro Text",
        Inter,
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
    text-rendering: geometricPrecision;
}




/* =========================================================
   СКРЫВАЕМ НИЖНЮЮ НАВИГАЦИЮ
   ========================================================= */

body:has(.habit-icon-picker) .bottom-nav {
    display: none !important;
}