/* icons color #255992 */

:root {

    /* Common */
    --light-blue: #DDE8EE;
    --dark-blue-font-color: #22487b;
    --dark-gray-font-color: rgb(28, 28, 28);
    --light-gray-font-color: rgb(76, 76, 76);
    --warning-char-counter-color: #ad1111;

    /* Toolbar */

    --toolbar-height: 4vh;
    --tab-bar-height: clamp(45px, 6vh, 80px);
    --menu-background-color: #f9f9f9;
    --toolbar-right-items-gap: clamp(7px, 1.1vh, 9px);
    --large-scale-active: url('./icons/font-large.png');
    --medium-scale-active: url('./icons/font-medium.png');
    --small-scale-active: url('./icons/font-small.png');
    --large-scale-not-active: url('./icons/font-large-lightblue.png');
    --medium-scale-not-active: url('./icons/font-medium-lightblue.png');
    --small-scale-not-active: url('./icons/font-small-lightblue.png');

    /* Details Container */

    --details-bubble-font-size: clamp(25px, 2cqw + 0.65vh + 12px, 35px);
    --details-container-width: clamp(180px,28vw,360px);
    --state-element-background: var(--light-blue);
    --state-element-text: var(--light-gray-font-color);
    --details-box-separator-line-color: var(--light-blue);
    --details-buttons-size: clamp(30px,5vmin,50px);
    --statement-char-counter-color: #969595;
    --statement-data-placeholder-color: #999;
    --details-bubble-char-counter-color: var(--dark-gray-font-color);
    --statement-box-background-color: #C5D3DE;
    --statement-font-size: clamp(8px, 2cqw + 0.65vh + 2px, 28px);

    /* Tags */

    --tag-element-background: var(--light-blue);
    --tag-element-text: var(--light-gray-font-color);
    --bubble-tag-icon-size: clamp(10px, 8cqw, 20px);

    /* Contributor */

    --bubble-default-contributor-width: clamp(8px,8cqw,30px);
    --bubble-minor-contributor-width: clamp(6px,5cqw,20px);
    --bubble-contributor-width: clamp(30px,100%,190px);
    --bubble-contributor-background: rgb(201, 221, 228, 0.8);
    --contributor-element-background: var(--light-blue);
    --contributor-element-text: var(--light-gray-font-color);
    --contributor-element-icon: var(--light-gray-font-color);
    --bubble-contributor-icon-background: #F6C501;

    /* Flags */

    --bubble-assignments-background: rgb(255,255,255,0.5);
    --bubble-assignments-text: #4c4c4c;
    --bubble-flag-background: rgb(201, 221, 228);
    --bubble-flag-icon-background: #fd9ae8;

    /* Bubbles View */

    --bubble-background-level1: #22487b;
    --bubble-background-level2: rgb(37, 88, 145);
    --bubble-background-level3: rgb(96, 139, 183);
    --bubble-background-level4: rgb(221, 232, 238);

    --bubble-text-color-level1: #f1e8e8;
    --bubble-text-color-level2: #f1e8e8;
    --bubble-text-color-level3: #f1e8e8;
    --bubble-text-color-level4: #757575;

    --bubble-xray-hidden-background-level1: rgb(174, 15, 15);
    --bubble-xray-hidden-background-level2: rgb(200, 50, 50);
    --bubble-xray-hidden-background-level3: rgb(220, 100, 100);
    --bubble-xray-hidden-background-level4: rgb(240, 200, 200);

    --bubble-xray-hidden-text-color-level1: rgb(241, 232, 232);
    --bubble-xray-hidden-text-color-level2: rgb(241, 232, 232);
    --bubble-xray-hidden-text-color-level3: rgb(241, 232, 232);
    --bubble-xray-hidden-text-color-level4: rgb(117, 117, 117);

    --bubble-three-dots-menu-level1: url('./icons/three-dots-menu-white.png');
    --bubble-three-dots-menu-level2: url('./icons/three-dots-menu-white.png');
    --bubble-three-dots-menu-level3: url('./icons/three-dots-menu-white.png');
    --bubble-three-dots-menu-level4: url('./icons/three-dots-menu-gray.png');

    --bubble-flag-splash-background: rgba(209, 30, 209, 0.7);
    --selected-bubble-box-shadow: 0 0 5px 5px rgb(201, 201, 201);

    /* Notes */

    --normal-note-background: #FFE86D;
    --flagged-note-background: #FFD2F2;
    --note-state-border-color: #8d8d8d;
    --note-select-border-color: #4e4e4e;

    /* Kanban View */

    --normal-kanban-note-todo-background: #ffe96da0;
    --flagged-kanban-note-todo-background: #fd9ae8a0;
    --normal-kanban-note-background: #ffe96d;
    --flagged-kanban-note-background: #fd9ae8;
    --kanban-note-todo-border: 1px solid #E0E0E0;
    --kanban-note-in-progress-border: 1px solid #313131ff;
    --kanban-note-done-border: 2.1px solid #313131ff;

    /* Overlay Bubbles */

    --xray-hidden-bubble-box-shadow: 0 0 8px 8px rgba(24, 230, 237, 0.8);
    --xray-hidden-flagged-bubble-box-shadow: 0 0 8px 8px rgba(192, 16, 16, 0.6);

    /* Pages (Tab-bar - States) */

    --buzz-page-background: rgb(239, 243, 245);
    --sunk-page-background: rgb(246, 246, 246);
    --docked-page-background: rgb(228,237,244);
    --trash-page-background: #F9f9f9;

    /* Drag Drop */

    --cursor-add: url('./icons/cursor-assign.png');
    --dropping-contributor-on-bubble-cursor: var(--cursor-add);
    --dropping-tag-on-bubble-cursor: var(--cursor-add);
    --dropping-contributor-on-sticky-note-cursor: var(--cursor-add);
    --dropping-tag-on-sticky-note-cursor: var(--cursor-add);
    --dropping-bubble-on-bubble-cursor: url('./icons/dropping-bubble-on-bubble-cursor.png');
    --dropping-bubble-on-state-cursor: url('./icons/dropping-bubble-on-state-cursor.png');
}