From 2389aa2af7825a4a663681b1c05d44459dc23a71 Mon Sep 17 00:00:00 2001
From: Maxim Kadushkin <maxim.kadushkin@onlyoffice.com>
Date: Wed, 5 Oct 2022 21:22:34 +0300
Subject: [PATCH] [themes] correct scroll's shadow

---
 apps/common/main/resources/less/toolbar.less | 30 ++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/apps/common/main/resources/less/toolbar.less b/apps/common/main/resources/less/toolbar.less
index 9b4350971..2d44374ac 100644
--- a/apps/common/main/resources/less/toolbar.less
+++ b/apps/common/main/resources/less/toolbar.less
@@ -79,6 +79,7 @@
             display: inline-flex;
             align-items: center;
             height: 100%;
+            position: relative;
             &:hover {
                 background-color: @highlight-header-button-hover-ie;
                 background-color: @highlight-header-button-hover;
@@ -119,6 +120,30 @@
             }
         }
 
+        //&:not(:where(.style-off-tabs *)) { IE doesn't support "where" pseudo selector
+        :not(.style-off-tabs) > & {
+            &.short {
+                li {
+                    &:after {
+                        content: '';
+                        position: absolute;
+                        background: @border-toolbar-active-panel-top;
+                        height: 1px;
+                        bottom: 0;
+                        left: 1px;
+                        right: 1px;
+                        z-index: 2;
+                    }
+
+                    &.active {
+                        &:after {
+                            background: @background-toolbar;
+                        }
+                    }
+                }
+            }
+        }
+
         .scroll {
             line-height: @height-tabs;
             min-width: 20px;
@@ -140,7 +165,7 @@
 
             &.left{
                 box-shadow: 5px 0 20px 5px @header-background-color-ie;
-                box-shadow: 18px 37px 0 10px @background-toolbar, 5px 0 20px 5px @header-background-color;
+                box-shadow: 18px 37px 0 10px @border-toolbar-active-panel-top, 5px 0 20px 5px @header-background-color;
 
                 &:after {
                     transform: rotate(135deg);
@@ -149,7 +174,7 @@
             }
             &.right{
                 box-shadow: -5px 0 20px 5px @header-background-color-ie;
-                box-shadow: -10px 37px 0 10px @background-toolbar, -5px 0 20px 5px @header-background-color;
+                box-shadow: -10px 37px 0 10px @border-toolbar-active-panel-top, -5px 0 20px 5px @header-background-color;
 
                 &:after {
                     transform: rotate(-45deg);
@@ -411,6 +436,7 @@
 
             li {
                 position: relative;
+
                 &:after {
                     //transition: opacity .1s;
                     //transition: bottom .1s;