@use "sass:color";

@function toRGB($color) {
  @return color.channel($color, "red") + ", " + color.channel($color, "green") + ", " + color.channel($color, "blue");
}

@function blend-normal($foreground, $background) {
  $opacity: color.opacity($foreground);
  $background-opacity: color.opacity($background);

  // calculate opacity
  /* stylelint-disable @stylistic/max-line-length */
  $bm-red: color.channel($foreground, "red") * $opacity + color.channel($background, "red") * $background-opacity * (1 - $opacity);
  $bm-green: color.channel($foreground, "green") * $opacity + color.channel($background, "green") * $background-opacity * (1 - $opacity);
  $bm-blue: color.channel($foreground, "blue") * $opacity + color.channel($background, "blue") * $background-opacity * (1 - $opacity);
  /* stylelint-enable @stylistic/max-line-length */

  @return rgb($bm-red, $bm-green, $bm-blue);
}

@layer variables {
  $color-primary: #3390ec;

  $color-links: #3390ec;

  $color-placeholders: #a2acb4;

  $color-text-green: #4fae4e;
  $color-green: #00c73e;
  $color-light-green: #eeffde;

  $color-error: #e53935;

  $color-warning: #fb8c00;

  $color-yellow: #fdd764;
  $color-orange: #d08a31;
  $color-light-coral: #d08a3133;

  $color-white: #ffffff;
  $color-black: #000000;
  $color-dark-gray: #2e3939;
  $color-gray: #c4c9cc;
  $color-text-secondary: #707579;
  $color-text-secondary-apple: #8a8a90;
  $color-text-meta: #686c72;
  $color-text-meta-apple: #8c8c91;
  $color-borders: #dadce0;
  $color-dividers: #c8c6cc;
  $color-dividers-android: #E7E7E7;
  $color-item-hover: #f4f4f5;
  $color-item-active: #ededed;
  $color-chat-hover: #f4f4f5;
  $color-chat-active: #3390ec;
  $color-selection: #3993fb;

  $color-message-reaction: #ebf3fd;
  $color-message-reaction-hover: #c5def9;
  $color-message-reaction-own: #cef0ba;
  $color-message-reaction-own-hover: #b5e0a4;
  $color-message-reaction-chosen-hover: #1a82ea;
  $color-message-reaction-chosen-hover-own: #3f9d4b;

  $color-message-non-contact: #cceebf;

  $color-message-story-mention-from: #4ef390;
  $color-message-story-mention-to: #74bcff;

  :root {
    --color-background: #{$color-white};
    --color-background-compact-menu: #FFFFFFBB;
    --color-background-compact-menu-reactions: #FFFFFFEB;
    --color-background-compact-menu-hover: #000000B2;
    --color-background-menu-separator: #0000001a;
    --color-background-selected: #f4f4f5;
    --color-background-secondary: #f4f4f5;
    --color-background-secondary-accent: #e4e4e5;
    --color-background-sidebar: #E4E4E5;
    --color-background-own: #{$color-light-green};
    --color-background-own-selected: #{color.adjust($color-light-green, $lightness: -10%, $space: hsl)};
    --color-text: #{$color-black};
    --color-text-rgb: #{toRGB($color-black)};
    --color-text-lighter: #{$color-dark-gray};
    --color-text-secondary: #{$color-text-secondary};
    --color-icon-secondary: #{$color-text-secondary};
    --color-text-secondary-rgb: #{toRGB($color-text-secondary)};
    --color-text-secondary-apple: #{$color-text-secondary-apple};
    --color-text-meta: #{$color-text-meta};
    --color-text-meta-rgb: #{toRGB($color-text-meta)};
    --color-text-meta-colored: #{$color-text-green};
    --color-text-meta-apple: #{$color-text-meta-apple};
    --color-text-green: #{$color-text-green};
    --color-text-green-rgb: #{toRGB($color-text-green)};
    --color-borders: #{$color-borders};
    --color-borders-input: #{$color-borders};
    --color-borders-alternate: rgba(0, 0, 0, 0.1);
    --color-borders-read-story: #C4C9CC;
    --color-dividers: #{$color-dividers};
    --color-dividers-android: #{$color-dividers-android};
    --color-webpage-initial-background: #{$color-dark-gray};
    --color-interactive-active: var(--color-primary);
    --color-interactive-inactive: rgba(var(--color-text-secondary-rgb), 0.25);
    --color-interactive-buffered: rgba(var(--color-text-secondary-rgb), 0.25); // Overlays underlying inactive element
    --color-interactive-element-hover: rgba(var(--color-text-secondary-rgb), 0.08);
    --color-composer-button: #{$color-text-secondary}CC;
    --color-toast-background: #202020CC;

    --color-voice-transcribe-button: #e8f3ff;
    --color-voice-transcribe-button-own: #cceebf;

    --color-primary: #{$color-primary};
    --color-primary-shade: #{color.mix($color-primary, $color-black, 92%)};
    --color-primary-shade-darker: #{color.mix($color-primary, $color-black, 84%)};
    --color-primary-shade-rgb: #{toRGB(color.mix($color-primary, $color-black, 92%))};
    --color-primary-opacity: rgba(var(--color-primary), 0.2);
    --color-primary-opacity-hover: rgba(var(--color-primary), 0.25);
    --color-primary-tint: rgba(var(--color-primary), 0.1);
    --color-active: #{$color-green};
    --color-active-darker: #{color.mix($color-green, $color-black, 84%)};
    --color-success: #{$color-green};

    --accent-color: var(--color-primary);
    --accent-background-color: var(--color-primary-tint);
    --accent-background-active-color: var(--color-primary-opacity-hover);

    --color-green: #{$color-green};
    --color-green-darker: #{color.mix($color-green, $color-black, 84%)};
    --color-green-rgb: #{toRGB($color-green)};

    --color-error: #{$color-error};
    --color-error-shade: #{color.mix($color-error, $color-black, 92%)};
    --color-error-rgb: #{toRGB($color-error)};

    --color-warning: #{$color-warning};

    --color-yellow: #{$color-yellow};

    --color-orange: #{$color-orange};
    --color-light-coral: #{$color-light-coral};

    --color-links: #{$color-links};

    --color-own-links: #{$color-white};

    --color-placeholders: #{$color-placeholders};

    --color-list-icon: #{$color-white};

    --color-code: #4a729a;
    --color-code-bg: #{rgba($color-text-secondary, 0.08)};
    --color-code-own: #3c7940;
    --color-code-own-bg: #{rgba($color-text-secondary, 0.08)};

    --color-accent-own: #{$color-text-green};
    --color-accent-own-rgb: #{toRGB($color-text-green)};
    --color-message-meta-own: #{$color-text-green};

    --color-message-reaction: #{$color-message-reaction};
    --color-message-reaction-hover: #{$color-message-reaction-hover};
    --color-message-reaction-own: #{$color-message-reaction-own};
    --color-message-reaction-hover-own: #{$color-message-reaction-own-hover};
    --color-message-reaction-chosen-hover: #{$color-message-reaction-chosen-hover};
    --color-message-reaction-chosen-hover-own: #{$color-message-reaction-chosen-hover-own};

    --color-message-non-contact: #{$color-message-non-contact};

    --color-message-story-mention-from: #{$color-message-story-mention-from};
    --color-message-story-mention-to: #{$color-message-story-mention-to};

    --color-reply-hover: #{blend-normal(rgba($color-text-secondary, 0.08), $color-white)};
    --color-reply-active: #{blend-normal(rgba($color-text-secondary, 0.16), $color-white)};
    --color-reply-own-hover: #{blend-normal(rgba($color-text-green, 0.12), $color-light-green)};
    --color-reply-own-active: #{blend-normal(rgba($color-text-green, 0.24), $color-light-green)};

    --color-background-own-apple: #dcf8c5;
    --color-reply-own-hover-apple: #cbefb7;
    --color-reply-own-active-apple: #bae6a8;

    --color-white: #{$color-white};
    --color-gray: #{$color-gray};

    --color-chat-username: #3C7EB0;
    --color-chat-hover: #{$color-chat-hover};
    --color-chat-active: #{$color-chat-active};
    --color-item-hover: #{$color-item-hover};
    --color-item-active: #{$color-item-active};

    --color-selection-highlight: #{$color-selection};
    --color-selection-highlight-emoji: rgba(#{toRGB($color-selection)}, 0.7);

    --color-avatar-story-unread-from: #34c578;
    --color-avatar-story-unread-to: #3ca3f3;
    --color-avatar-story-friend-unread-from: #c9eb38;
    --color-avatar-story-friend-unread-to: #09c167;

    --color-default-shadow: #72727240;
    --color-light-shadow: #7272722b;

    --color-skeleton-background: rgba(33, 33, 33, 0.15);
    --color-skeleton-foreground: rgba(232, 232, 232, 0.2);

    --color-scrollbar: rgba(90, 90, 90, 0.3);
    --color-scrollbar-code: rgba(200, 200, 200, 0.3);

    --color-telegram-blue: #{$color-primary};

    --color-forum-hover-unread-topic: #e9e9e9;
    --color-forum-hover-unread-topic-hover: #dcdcdc;

    --color-deleted-account: #9eaab5;
    --color-archive: #9eaab5;
    --stars-gradient: linear-gradient(90deg, #FFAA00 0%, #FFCD3A 100%);

    --color-stars: #FFAA00;
    --color-heart: #ff3c32;

    --color-gift-uncommon: #40A920;
    --color-gift-uncommon-bg: rgba(64, 169, 32, 0.15);
    --color-gift-rare: #11AABE;
    --color-gift-rare-bg: rgba(17, 170, 190, 0.15);
    --color-gift-epic: #955CDB;
    --color-gift-epic-bg: rgba(149, 92, 219, 0.15);
    --color-gift-legendary: #BF7600;
    --color-gift-legendary-bg: rgba(191, 118, 0, 0.15);

    --color-negative-progress: #CE4C47;

    --vh: 1vh;

    --border-radius-button: 1rem;
    --border-radius-button-tiny: 0.875rem;
    --border-radius-modal: 2rem;
    --border-radius-toast: 1rem;
    --border-radius-island: 1.5rem;
    --border-radius-default: 1rem;
    --border-radius-default-small: 0.625rem;
    --border-radius-default-tiny: 0.375rem;
    --border-radius-messages: 0.9375rem;
    --border-radius-messages-small: 0.375rem;
    --border-radius-forum-avatar: 33.3333%;
    --messages-container-width: 45.5rem;
    --right-column-width: 26.5rem;
    --folders-sidebar-width: 5rem;
    --window-controls-width: 0rem;
    --header-height: 3.5rem;
    --emoji-size: 1.25em;
    --custom-emoji-size: var(--emoji-size);
    --custom-emoji-border-radius: 0;

    --symbol-menu-width: 24rem;
    --symbol-menu-height: 22.375rem;
    --symbol-menu-footer-height: 3rem;

    --scrollbar-width: 0;

    --z-overlay-effects: 12000;
    --z-modal-confirm: 10500;
    --z-reaction-picker: 10200;
    --z-portal-menu: 10000;
    --z-symbol-menu-modal: 5000;
    --z-lock-screen: 3000;
    --z-ui-loader-mask: 2000;
    --z-notification: 1700;
    --z-confetti: 1600;
    --z-story-viewer: 1150;
    --z-reaction-interaction-effect: 1100;
    --z-right-column: 900;
    --z-right-column-menu: 950;
    --z-header-menu: 990;
    --z-header-menu-backdrop: 980;
    --z-modal: 1510;
    --z-modal-menu: 1600;
    --z-resize-grip: 1000;
    --z-media-viewer: 1500;
    --z-modal-low-priority: 1400;
    --z-video-player-controls: 3;
    --z-drop-area: 55;
    --z-animation-fade: 50;
    --z-menu-bubble: 21;
    --z-menu-backdrop: 20;
    --z-message-effect: 15;
    --z-message-highlighted: 14;
    --z-forum-panel: 13;
    --z-message-context-menu: 13;
    --z-scroll-down-button: 12;
    --z-local-search: 12;
    --z-left-header: 11;
    --z-middle-header: 11;
    --z-middle-footer: 11;
    --z-scroll-notch: 10;
    --z-story-ribbon: 10;
    --z-country-code-input-group: 10;
    --z-message-select-control: 9;
    --z-message-select-area: 8;
    --z-sticky-date: 9;
    --z-register-add-avatar: 5;
    --z-media-viewer-head: 3;
    --z-symbol-menu-mobile: calc(var(--z-story-viewer) + 1);
    --z-resize-handle: 2;
    --z-below: -1;
    --z-chat-ripple: 6;
    --z-chat-float-button: calc(var(--z-chat-ripple) + 1);

    --spinner-white-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==);
    --spinner-white-thin-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTEyIDIzQzUuOSAyMyAxIDE4LjEgMSAxMlM1LjkgMSAxMiAxVjBDNS40IDAgMCA1LjQgMCAxMnM1LjQgMTIgMTIgMTIgMTItNS40IDEyLTEyaC0xYzAgNi4xLTQuOSAxMS0xMSAxMXoiLz48L3N2Zz4=);
    --spinner-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRlYTRmNiIvPjwvc3ZnPg==);
    --spinner-dark-blue-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzgzNzhEQiIvPjwvc3ZnPg==);
    --spinner-black-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzJlMzkzOSIvPjwvc3ZnPg==);
    --spinner-green-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzRmYWU0ZSIvPjwvc3ZnPg==);
    --spinner-gray-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iIzcwNzU3OSIvPjwvc3ZnPg==);
    --spinner-yellow-data: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTEwLjggMjIuNEM2IDIxLjkgMi4xIDE4IDEuNiAxMy4yLjkgNy4xIDUuNCAxLjkgMTEuMyAxLjVjLjQgMCAuNy0uMy43LS43IDAtLjQtLjQtLjgtLjgtLjhDNC44LjQtLjIgNS45IDAgMTIuNS4yIDE4LjYgNS40IDIzLjggMTEuNSAyNGM2LjYuMiAxMi00LjggMTIuNC0xMS4yIDAtLjQtLjMtLjgtLjgtLjgtLjQgMC0uNy4zLS43LjctLjMgNS45LTUuNSAxMC40LTExLjYgOS43eiIgZmlsbD0iI0ZERDc2NCIvPjwvc3ZnPg==);

    --premium-gradient: linear-gradient(84.4deg, #6C93FF -4.85%, #976FFF 51.72%, #DF69D1 110.7%);

    --layer-blackout-opacity: 0.1;

    --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1);
    --layer-transition-behind: 300ms cubic-bezier(0.33, 1, 0.68, 1);
    --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
    --select-transition: 200ms ease-out;
    --chat-transform-transition: 0.2s ease-out;

    --safe-area-top: env(safe-area-inset-top);
    --safe-area-right: env(safe-area-inset-right);
    --safe-area-bottom: env(safe-area-inset-bottom);
    --safe-area-left: env(safe-area-inset-left);

    --picker-title-shift: 1rem;

    --font-weight-normal: 400;
    --font-weight-medium: 500;

    --middle-header-panes-height: 0px;

    body.is-ios {
      --layer-transition: 650ms cubic-bezier(0.22, 1, 0.36, 1);
      --layer-transition-behind: 650ms cubic-bezier(0.33, 1, 0.68, 1);
      --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1);
    }

    body.is-android {
      --slide-transition: 350ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    @media (min-width: 1276px) and (max-width: 1920px) {
      --right-column-width: 25vw;
    }

    @media (min-width: 1921px) {
      --messages-container-width: 50vw;
    }

    @media (max-width: 600px) {
      --right-column-width: 100vw;
      --symbol-menu-width: 100vw;
      --symbol-menu-height: 17.6875rem;
    }
  }
}
