/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

/**
 * Any changes made to the following variables:
 *   `search-logo-size`, `search-input-height`, `dial-height`, `news-height`
 * should be reflected in `COMPONENT_SIZES` object in
 *  modules/freshtab/sources/home/components/app.jsx
 */
$configs: (
    xsmall: (
        base: (
            aside-width: 0,
            container-width: 408px,
            section-padding: 0,
            inner-content-width: 365px,
        ),
        speed-dials: (
            dial-height: 65px,
            dial-padding: 10px 10px,
            dial-header-title: 10px,
            dial-header-font-size: 11.5px,
            dial-title-font-size: 11px,
            logo-size: 34px,
            logo-font-size: 18px,
            logo-line-height: 22px,
            logo-padding: 6px 4px,
            delete-button-position-right: 5px,
            add-dial-form-submit-margin: 2px,
            add-dial-form-error-position: -42px,
        ),
        url-bar: (
            search-size: 375px,
            search-input-height: 34px,
            search-logo-size: 46px,
            search-font-size: 17px,
            search-text-indent: 40px,
        ),
        stats: (
            stats-value-display: block,
            stats-image-margin: auto,
            stats-image-size: 24px,
            stats-text-align: center,
            stats-description-display: none,
            stats-box-padding: 7px 5px,
            stats-buttons-justify: center,
            stats-buttons-padding-right: 0,
            stats-font-size: (
                title: 11px,
                value: 18px,
                description: 11px,
            ),
        ),
        news: (
            news-container: 375px,
            news-dash-width: 30px,
            news-dash-padding: 0 2px,
            news-margin: 2px,
            news-height: 175px,
            news-box-height: 118px,
            news-box-max-width: 375px,
            news-font-size: 16px,
            news-box-flex-grow: 1,
        ),
        modal: (
            modal-form-width: 350px,
            modal-form-padding: 35px,
            modal-close-form-right: 34px,
            modal-close-form-top: 30px,
            modal-error-icon-top: 80px,
            modal-error-icon-right: 34px,
        ),
        tooltip: (
            tooltip-visible: none,
        ),
    ),

    small: (
        base: (
            aside-width: 74px,
            container-width: 483px,
            section-padding: 0,
            inner-content-width: 436px,
        ),
        speed-dials: (
            dial-height: 65px,
            dial-padding: 10px 20px,
            dial-header-title: 10px,
            dial-header-font-size: 11.5px,
            dial-title-font-size: 11px,
            logo-size: 34px,
            logo-font-size: 18px,
            logo-line-height: 23px,
            logo-padding: 6px 4px,
            delete-button-position-right: 12px,
            add-dial-form-submit-margin: 2px,
            add-dial-form-error-position: -42px,
        ),
        url-bar: (
            search-size: 436px,
            search-input-height: 34px,
            search-logo-size: 46px,
            search-font-size: 17px,
            search-text-indent: 40px,
        ),
        stats: (
            stats-value-display: block,
            stats-image-margin: auto,
            stats-image-size: 24px,
            stats-text-align: center,
            stats-description-display: none,
            stats-box-padding: 7px 5px,
            stats-buttons-justify: center,
            stats-buttons-padding-right: 0,
            stats-font-size: (
                title: 13px,
                value: 21px,
                description: 11px,
            ),
        ),
        news: (
            news-container: 446px,
            news-dash-width: 40px,
            news-dash-padding: 0,
            news-margin: 5px,
            news-height: 185px,
            news-box-height: 118px,
            news-box-max-width: 446px,
            news-font-size: 16px,
            news-box-flex-grow: 1,
        ),
        modal: (
            modal-form-width: 350px,
            modal-form-padding: 35px,
            modal-close-form-right: 34px,
            modal-close-form-top: 30px,
            modal-error-icon-top: 80px,
            modal-error-icon-right: 34px,
        ),
        tooltip: (
            tooltip-visible: block,
        ),
    ),

    xmedium: (
        base: (
            aside-width: 74px,
            container-width: 753px,
            section-padding: 0,
            inner-content-width: 677px,
        ),
        speed-dials: (
            dial-height: 80px,
            dial-padding: 10px 20px,
            dial-header-title: 8px,
            dial-header-font-size: 11.5px,
            dial-title-font-size: 12px,
            logo-size: 48px,
            logo-font-size: 24px,
            logo-line-height: 28px,
            logo-padding: 11px 4px,
            delete-button-position-right: 27px,
            add-dial-form-submit-margin: 10px,
            add-dial-form-error-position: -28px,
        ),
        url-bar: (
            search-size: 677px,
            search-input-height: 48px,
            search-logo-size: 66px,
            search-font-size: 21px,
            search-text-indent: 57px,
        ),
        stats: (
            stats-value-display: inline-block,
            stats-image-margin: 0 5px 0 -2px,
            stats-image-size: 28px,
            stats-text-align: left,
            stats-description-display: block,
            stats-box-padding: 7px 25px,
            stats-buttons-justify: flex-end,
            stats-buttons-padding-right: 25px,
            stats-font-size: (
                title: 13px,
                value: 22px,
                description: 12px,
            ),
        ),
        news: (
            news-container: 687px,
            news-dash-width: 40px,
            news-dash-padding: 0,
            news-margin: 5px,
            news-height: 175px,
            news-box-height: 116px,
            news-box-max-width: 333px,
            news-font-size: 16px,
            news-box-flex-grow: 1,
        ),
        modal: (
            modal-form-width: 440px,
            modal-form-padding: 35px,
            modal-close-form-right: 34px,
            modal-close-form-top: 30px,
            modal-error-icon-top: 80px,
            modal-error-icon-right: 34px,
        ),
        tooltip: (
            tooltip-visible: block,
        ),
    ),

    medium: (
        base: (
            aside-width: 74px,
            container-width: 857px,
            section-padding: 0,
            inner-content-width: 762px,
        ),
        speed-dials: (
            dial-height: 80px,
            dial-padding: 10px 20px,
            dial-header-title: 8px,
            dial-header-font-size: 11.5px,
            dial-title-font-size: 12px,
            logo-size: 48px,
            logo-font-size: 24px,
            logo-line-height: 28px,
            logo-padding: 11px 4px,
            delete-button-position-right: 35px,
            add-dial-form-submit-margin: 10px,
            add-dial-form-error-position: -20px,
        ),
        url-bar: (
            search-size: 477px,
            search-input-height: 48px,
            search-logo-size: 66px,
            search-font-size: 21px,
            search-text-indent: 57px,
        ),
        stats: (
            stats-value-display: inline-block,
            stats-image-margin: 0 5px 0 -2px,
            stats-image-size: 28px,
            stats-text-align: left,
            stats-description-display: block,
            stats-box-padding: 7px 25px,
            stats-buttons-justify: flex-end,
            stats-buttons-padding-right: 25px,
            stats-font-size: (
                title: 14px,
                value: 27px,
                description: 14px,
            ),
        ),
        news: (
            news-container: 772px,
            news-dash-width: 40px,
            news-dash-padding: 0,
            news-margin: 4px,
            news-height: 195px,
            news-box-height: 134px,
            news-box-max-width: 477px,
            news-font-size: 16px,
            news-box-flex-grow: 0,
        ),
        modal: (
            modal-form-width: 440px,
            modal-form-padding: 35px,
            modal-close-form-right: 34px,
            modal-close-form-top: 30px,
            modal-error-icon-top: 80px,
            modal-error-icon-right: 34px,
        ),
        tooltip: (
            tooltip-visible: block,
        ),
    ),

    large: (
        base: (
            aside-width: 74px,
            container-width: 1400px,
            section-padding: 0,
            inner-content-width: 1230px,
        ),
        speed-dials: (
            dial-height: 95px,
            dial-padding: 10px 20px,
            dial-header-title: 18px,
            dial-header-font-size: 13.5px,
            dial-title-font-size: 14px,
            logo-size: 63px,
            logo-font-size: 24px,
            logo-line-height: 30px,
            logo-padding: 16px 4px,
            delete-button-position-right: 73px,
            add-dial-form-submit-margin: 18px,
            add-dial-form-error-position: -20px,
        ),
        url-bar: (
            search-size: 764px,
            search-input-height: 63px,
            search-logo-size: 86px,
            search-font-size: 24px,
            search-text-indent: 74px,
        ),
        stats: (
            stats-value-display: inline-block,
            stats-image-margin: 0 5px 0 -2px,
            stats-image-size: 32px,
            stats-text-align: left,
            stats-description-display: block,
            stats-box-padding: 7px 25px,
            stats-buttons-justify: flex-end,
            stats-buttons-padding-right: 25px,
            stats-font-size: (
                title: 17px,
                value: 36px,
                description: 14px,
            ),
        ),
        news: (
            news-container: 1260px,
            news-dash-width: 40px,
            news-dash-padding: 0,
            news-margin: 15px,
            news-height: 175px,
            news-box-height: 115px,
            news-box-max-width: 764px,
            news-font-size: 17px,
            news-box-flex-grow: 0,
        ),
        modal: (
            modal-form-width: 660px,
            modal-form-padding: 60px,
            modal-close-form-right: 30px,
            modal-close-form-top: 25px,
            modal-error-icon-top: 106px,
            modal-error-icon-right: 60px,
        ),
        tooltip: (
            tooltip-visible: block,
        ),
    ),
);
