@interopio/groups-ui-react 2.4.1 → 2.5.0

package/dist/styles/groups.css

@@ -5,7 +5,13 @@
     box-sizing: border-box;
     transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
     transition-duration: 240ms;
-    transition-property: background-color, color;
+    transition-property: background-color;
+}
+
+*::before,
+*::after {
+    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
+    transition-duration: 240ms;
 }
 
 body {
@@ -552,8 +558,7 @@ input {
     height: calc(var(--t42-tab-bar-tab-close-button-size) + var(--t42-tab-bar-tab-close-button-padding) * 2);
     border-radius: 50%;
     background-color: var(--t42-tab-bar-tab-close-button-background);
-    transition-duration: 80ms;
-    transition-property: background-color, fill, color;
+    transition-property: fill, color;
 }
 
 .t42-tab-close-button-content svg {
@@ -570,6 +575,10 @@ input {
     background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
 }
 
+.t42-tab-close-button-content:hover::before {
+    color: var(--t42-tab-bar-tab-text-hover);
+}
+
 .t42-tab-close-button-content:hover .t42-standard-button-image {
     fill: var(--t42-tab-bar-tab-text-hover);
 }
@@ -605,22 +614,27 @@ input {
 }
 
 .t42-channel-selector-direction {
-    width: var(--t42-channel-selector-direction-width);
+    width: auto;
+    min-width: var(--t42-tab-bar-tab-channels-width);
     height: var(--t42-channel-selector-direction-height);
+    gap: var(--t42-channel-selector-direction-gap);
 }
 
 .t42-channel-selector-direction .icon {
     gap: var(--t42-channel-selector-direction-gap);
+    width: var(--t42-channel-selector-direction-width);
 }
 
-.t42-channel-selector-content-light::before {
+.t42-channel-selector-content-light,
+.t42-channel-selector-content-light::before,
+.t42-channel-selector-content-light i::before {
     color: hsl(var(--io-white));
-    transition-property: color;
 }
 
-.t42-channel-selector-content-dark::before {
+.t42-channel-selector-content-dark,
+.t42-channel-selector-content-dark::before,
+.t42-channel-selector-content-dark i::before {
     color: hsl(var(--io-black));
-    transition-property: color;
 }
 
 @keyframes approaching-edge-animation {
@@ -952,4 +966,46 @@ input {
     padding: 0;
     min-width: 0;
     margin: 0;
-}
+}
+
+.t42-multi-channel-selector-content {
+    width: var(--t42-tab-bar-tab-channels-width);
+    height: var(--t42-tab-bar-tab-channels-height);
+    border-radius: var(--t42-tab-bar-tab-channels-border-radius);
+}
+
+.t42-multi-channel-selector-2 {
+    background-image: conic-gradient(
+        var(--t42-multi-channel-selector-2-color-1) 0deg,
+        var(--t42-multi-channel-selector-2-color-1) 180deg,
+        var(--t42-multi-channel-selector-2-color-2) 180deg,
+        var(--t42-multi-channel-selector-2-color-2) 0deg
+    );
+    mask-image: var(--t42-multi-channel-selector-2-mask);
+}
+
+.t42-multi-channel-selector-3 {
+    background-image: conic-gradient(
+        var(--t42-multi-channel-selector-3-color-1) 0deg,
+        var(--t42-multi-channel-selector-3-color-1) 120deg,
+        var(--t42-multi-channel-selector-3-color-2) 120deg,
+        var(--t42-multi-channel-selector-3-color-2) 240deg,
+        var(--t42-multi-channel-selector-3-color-3) 240deg,
+        var(--t42-multi-channel-selector-3-color-3) 0deg
+    );
+    mask-image: var(--t42-multi-channel-selector-3-mask);
+}
+
+.t42-multi-channel-selector-4 {
+    background-image: conic-gradient(
+        var(--t42-multi-channel-selector-4-color-1) 0deg,
+        var(--t42-multi-channel-selector-4-color-1) 90deg,
+        var(--t42-multi-channel-selector-4-color-2) 90deg,
+        var(--t42-multi-channel-selector-4-color-2) 180deg,
+        var(--t42-multi-channel-selector-4-color-3) 180deg,
+        var(--t42-multi-channel-selector-4-color-3) 270deg,
+        var(--t42-multi-channel-selector-4-color-4) 270deg,
+        var(--t42-multi-channel-selector-4-color-4) 0deg
+    );
+    mask-image: var(--t42-multi-channel-selector-4-mask);
+}

package/dist/styles/styles.css

@@ -0,0 +1,574 @@
+@import "vars.css";
+
+* {
+    box-sizing: border-box;
+    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
+    transition-duration: 250ms;
+    transition-property: color;
+}
+
+body {
+    max-width: none;
+    max-height: none;
+    overflow: hidden;
+    background-color: var(--t42-background);
+    font-weight: var(--bs-body-font-weight);
+    font-family: var(--t42-font-family);
+    font-size: var(--t42-font-size);
+}
+
+#t42-group-container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    background-color: transparent;
+    border-style: solid;
+    border-color: var(--t42-group-border-color);
+    border-width: var(--t42-group-border-size);
+}
+
+#t42-frames-container {
+    display: flex;
+    flex-grow: 1;
+    position: relative;
+    height: 100%;
+    background-color: transparent;
+}
+
+.t42-caption-bar {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+}
+
+.t42-internal-caption-bar {
+    flex-direction: row;
+}
+
+.t42-react-caption-bar {
+    display: flex;
+    flex-grow: 1;
+}
+
+.t42-caption-bar:after {
+    width: 100%;
+    display: block;
+    background-color: var(--t42-caption-separator-color);
+    content: "";
+    position: absolute;
+    z-index: 1;
+}
+
+.t42-caption {
+    overflow: hidden;
+    align-items: center;
+    white-space: nowrap;
+    text-align: left;
+    text-overflow: ellipsis;
+    user-select: none;
+}
+
+.t42-title {
+    color: var(--t42-title-color);
+    margin: var(--t42-title-margin);
+}
+
+.t42-move-area {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+    min-width: var(--t42-move-area-min-width);
+}
+
+.t42-buttons-container {
+    display: flex;
+    flex-direction: row;
+}
+
+.t42-buttons {
+    display: flex;
+    flex-shrink: 0;
+    align-items: center;
+    overflow: hidden;
+    margin: 0px;
+    padding: 0px;
+    list-style-type: none;
+}
+
+.t42-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.t42-standard-button {
+    height: var(--t42-standard-button-size);
+    width: var(--t42-standard-button-size);
+    position: relative;
+}
+
+.t42-standard-button::before,
+.t42-tab-channel-selector-content::before,
+.t42-frame-channel-selector-content::before,
+.t42-tab-close-button-content::before {
+    color: var(--t42-standard-button-color);
+    display: block;
+    content: "";
+    width: var(--t42-standard-button-size);
+    height: var(--t42-standard-button-size);
+    transition-property: background-color, color;
+    -webkit-mask-repeat: no-repeat;
+}
+
+.t42-standard-button-image {
+    fill: var(--t42-standard-button-color);
+}
+
+.t42-caption-bar-button {
+    position: relative;
+    transition-property: background-color, color;
+    background-color: var(--t42-caption-bar-button-background);
+}
+
+.t42-caption-bar-button:hover,
+.t42-caption-bar-button.active {
+    background-color: var(--t42-caption-bar-button-hover-background);
+}
+
+.t42-caption-bar-button-close:hover {
+    background-color: var(--t42-caption-bar-button-close-hover-background);
+}
+
+.t42-caption-bar-button:hover .t42-standard-button:before {
+    color: var(--t42-standard-button-hover-color);
+}
+
+.t42-caption-bar-button:hover .t42-standard-button-close:before {
+    background-color: var(--t42-caption-bar-button-close-hover-text);
+}
+
+.t42-caption-bar-button:hover .t42-standard-button-extract::before,
+.t42-caption-bar-button:hover .t42-standard-button-minimize::before,
+.t42-caption-bar-button:hover .t42-standard-button-lock::before,
+.t42-caption-bar-button:hover .t42-standard-button-unlock::before,
+.t42-caption-bar-button:hover .t42-standard-button-sticky::before {
+    background-color: var(--t42-standard-button-hover-color);
+}
+
+.t42-standard-button-minimize::before {
+    height: 1px;
+    position: relative;
+    top: calc(var(--t42-standard-button-size) / 2);
+    background-color: var(--t42-standard-button-color);
+}
+
+.t42-standard-button-maximize::before {
+    box-shadow: inset 0 0 0 1px;
+}
+
+.t42-standard-button-close::before,
+.t42-tab-close-button-content::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 16 16' xml:space='preserve'%3E%3Cpath d='M0 1 1 0 8 7 15 0 16 1 9 8 16 15 15 16 8 9 1 16 0 15 7 8 0 1z'/%3E%3C/svg%3E");
+}
+
+.t42-tab-close-button-content::before {
+    height: var(--t42-tab-bar-tab-close-button-size);
+    width: var(--t42-tab-bar-tab-close-button-size);
+}
+
+.t42-standard-button-restore::before {
+    box-shadow: inset 0 0 0 1px;
+    color: var(--t42-standard-button-color);
+    position: absolute;
+    width: calc(var(--t42-standard-button-size) - 2px);
+    height: calc(var(--t42-standard-button-size) - 2px);
+    top: 2px;
+}
+
+.t42-standard-button-restore::after {
+    width: calc(
+        var(--t42-standard-button-size) -
+            (var(--t42-caption-bar-button-correction) / 2)
+    );
+    height: calc(
+        var(--t42-standard-button-size) -
+            (var(--t42-caption-bar-button-correction) / 2)
+    );
+    top: 0;
+    border-top: 1px solid;
+    border-right: 1px solid;
+    position: absolute;
+    content: "";
+    border-color: var(--t42-standard-button-color);
+    right: 0;
+}
+
+.t42-standard-button-extract::before {
+    background-color: var(--t42-standard-button-color);
+    width: calc(
+        var(--t42-standard-button-size) +
+            var(--t42-caption-bar-button-correction)
+    );
+    height: calc(
+        var(--t42-standard-button-size) +
+            var(--t42-caption-bar-button-correction)
+    );
+    top: calc(var(--t42-caption-bar-button-correction) / 2 * -1);
+    position: absolute;
+    left: calc(var(--t42-caption-bar-button-correction) / 2 * -1);
+    -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M12.8 3h-2.7l-.1.1v.2l.8.7.2.3-.2.2-5.1 5.1v.2l.5.5h.2l5.1-5.1.2-.2.3.2.7.8h.1c.1 0 .2 0 .2-.2V3.2c0-.1-.1-.2-.2-.2z'/%3E%3Cpath d='M11 12v.3H3.7V5H7v-.7H3.7c-.4 0-.7.3-.7.7v7.3c0 .4.3.7.7.7H11c.4 0 .7-.3.7-.7V9.7H11V12z'/%3E%3C/svg%3E");
+}
+
+.t42-standard-button-lock::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H13V5c0-2.8-1.8-5-5-5C4.9,0,3,2.2,3,5v2H1.7C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5  v-6C16,7.7,15.6,7,14.7,7z M4,5c0-2.2,1.5-4,4-4s4,1.8,4,4v2H4V5z M14.3,15H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6  C14.6,8,15,8.2,15,8.5v6C15,14.8,14.6,15,14.3,15z'/%3E%3C/svg%3E");
+}
+
+.t42-standard-button-unlock::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H14h-1h-1h-2H4V5c0-2.2,1.5-4,4-4c0.8,0,1.4,0.2,2,0.5V0.3C9.4,0.1,8.7,0,8,0C4.9,0,3,2.2,3,5v2H1.7  C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5v-6C16,7.7,15.6,7,14.7,7z M15,14.5c0,0.3-0.4,0.5-0.7,0.5  H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6C14.6,8,15,8.2,15,8.5V14.5z'/%3E%3C/svg%3E");
+}
+
+.t42-standard-button-unlock::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M14.7,7H14h-1h-1h-2H4V5c0-2.2,1.5-4,4-4c0.8,0,1.4,0.2,2,0.5V0.3C9.4,0.1,8.7,0,8,0C4.9,0,3,2.2,3,5v2H1.7  C0.8,7,0,7.7,0,8.5v6C0,15.3,0.8,16,1.7,16h12.6c0.9,0,1.7-0.7,1.7-1.5v-6C16,7.7,15.6,7,14.7,7z M15,14.5c0,0.3-0.4,0.5-0.7,0.5  H1.7C1.4,15,1,14.8,1,14.5v-6C1,8.2,1.4,8,1.7,8h12.6C14.6,8,15,8.2,15,8.5V14.5z'/%3E%3C/svg%3E");
+}
+
+.t42-standard-button-sticky::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2,4v8c0,2.7,1.3,4,4,4s4,0,4,0c2.7,0,4-1.3,4-4V4h-2v6c0,2.7-1.3,4-4,4l0,0c-2.7,0-4-1.3-4-4V4 M4,4H2 M2,0L2,0v2h2V0H2zM12,0h2v2h-2V0z'/%3E%3C/svg%3E");
+}
+
+.t42-tab-channel-selector-content::before,
+.t42-frame-channel-selector-content::before {
+    background-color: var(--t42-standard-button-color);
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M301 395l-79 79c-51 51-133 51-184 0-51-51-51-133 0-184l79-79a133 133 0 014-3c8-7 20-2 20 8 0 5 1 10 1 14 1 4-1 7-3 10-17 17-75 75-75 75-37 37-37 96 0 133 37 37 96 37 133 0l79-79 0 0c36-37 36-96 0-133-8-8-18-15-28-19-5-2-7-7-7-12a62 62 0 013-15c2-7 10-10 16-7 15 6 29 16 41 28 51 51 51 133 0 184zm-90-94c12 12 26 22 41 28 6 3 14-1 16-7a62 62 0 003-15c0-5-3-10-7-12-10-5-19-11-28-19-37-37-37-96 0-133l0 0 79-79c37-37 96-37 133 0 37 37 37 96 0 133 0 0-59 59-75 75-3 3-4 6-3 10a163 163 0 011 14c0 10 13 15 20 8a131 131 0 004-3l79-79c51-51 51-133 0-184-51-51-133-51-184 0l-79 79c-51 51-51 133 0 184z'/%3E%3C/svg%3E");
+}
+
+.t42-group-caption-bar {
+    height: auto;
+}
+
+.t42-group-caption-bar-element {
+    background-color: var(--t42-group-caption-background);
+}
+
+.t42-group-caption-bar::after {
+    bottom: 0;
+    height: var(--t42-group-caption-separator-size);
+}
+
+.t42-group-caption-bar-button {
+    width: var(--t42-group-caption-height);
+    height: var(--t42-group-caption-height);
+}
+
+.t42-frame {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 0;
+    flex-shrink: 0;
+    position: absolute;
+    overflow: hidden;
+    background-color: transparent;
+    border-style: solid;
+    border-color: var(--t42-frame-border-color);
+    border-width: var(--t42-frame-border-size);
+}
+
+.t42-frame-caption-bar {
+    height: auto;
+}
+
+.t42-frame-caption-bar::after {
+    bottom: 0;
+    height: var(--t42-frame-caption-separator-size);
+}
+
+.t42-frame-caption-bar-element {
+    background-color: var(--t42-frame-caption-background);
+}
+
+.t42-frame-channel-selector {
+    align-self: center;
+    width: var(--t42-frame-channel-selector-size);
+    height: var(--t42-frame-channel-selector-size);
+    margin: var(--t42-frame-channel-selector-margin);
+    justify-content: center;
+}
+
+.t42-frame-channel-selector-content {
+    width: var(--t42-standard-button-size);
+    height: var(--t42-standard-button-size);
+}
+
+.t42-frame-channel-selector-content .t42-standard-button-image {
+    fill: var(--t42-channels-fill-color);
+}
+
+.t42-frame-caption-bar-button {
+    width: var(--t42-frame-caption-height);
+    height: var(--t42-frame-caption-height);
+}
+
+.t42-frame-window-container {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+}
+
+.t42-frame-window {
+    display: flex;
+    flex-grow: 1;
+    background-color: var(--t42-background);
+}
+
+.t42-frame-window-footer {
+    display: flex;
+    flex-grow: 0;
+    flex-direction: column;
+    background-color: var(--t42-background);
+}
+
+.t42-tab-bar {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.t42-tab-bar::after {
+    display: block;
+    content: "";
+    position: absolute;
+    z-index: 1;
+    background-color: var(--t42-caption-separator-color);
+    bottom: 0;
+    height: var(--t42-tab-bar-separator-size);
+    width: 100%;
+}
+
+.t42-tab-bar-header {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    height: var(--t42-tab-bar-height);
+}
+
+.t42-tab-bar-element {
+    background-color: var(--t42-tab-bar-background);
+}
+
+.t42-tab-bar-button {
+    width: var(--t42-tab-bar-height);
+    height: var(--t42-tab-bar-height);
+}
+
+.t42-tabs {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+    list-style-type: none;
+    position: relative;
+    padding: 0px;
+    margin: var(--t42-tab-bar-tabs-margin);
+}
+
+.t42-react-tab {
+    display: flex;
+    flex-grow: 1;
+    overflow: hidden;
+}
+
+.t42-tab {
+    display: flex;
+    flex-direction: row;
+    flex-grow: 0;
+    flex-shrink: 1;
+    align-items: center;
+    position: relative;
+    padding: 0px;
+    width: var(--t42-tab-bar-tab-width);
+    min-width: var(--t42-tab-bar-tab-min-width);
+    max-width: var(--t42-tab-bar-tab-width);
+    background-color: var(--t42-tab-bar-tab-background);
+}
+
+.t42-tab::after {
+    width: var(--t42-tab-bar-tab-separator-size);
+    height: 100%;
+    position: absolute;
+    right: 0px;
+    display: block;
+    transition: 0.3s;
+    background-color: var(--t42-tab-bar-tab-separator-color);
+    content: "";
+    z-index: 10;
+}
+
+.t42-tab::before {
+    width: 0;
+    height: 0;
+    position: absolute;
+    left: 50%;
+    bottom: 0px;
+    display: block;
+    background-color: var(--t42-tab-bar-tab-separator-color);
+    content: "";
+    z-index: 10;
+    transition-timing-function: cubic-bezier(0.45, 0, 0.15, 1);
+    transition-duration: 250ms;
+    transition-property: width, left;
+}
+
+.t42-tab:hover::before {
+    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
+    height: var(--t42-tab-bar-tab-hover-separator-size);
+    left: 0;
+}
+
+.t42-tab:hover .t42-tab-caption {
+    color: var(--t42-caption-text-hover-color);
+}
+
+.t42-tab-channel-selector {
+    justify-content: center;
+    width: var(--t42-tab-bar-tab-channels-size);
+    height: var(--t42-tab-bar-tab-channels-size);
+    margin: var(--t42-tab-bar-tab-channels-margin);
+}
+
+.t42-tab-caption {
+    flex-grow: 1;
+    color: var(--t42-tab-bar-tab-text);
+    margin: var(--t42-tab-bar-tab-caption-margin);
+}
+
+.t42-tab-close-button {
+    margin: var(--t42-tab-bar-tab-close-button-margin);
+}
+
+.t42-tab-close-button-content {
+    display: flex;
+    width: calc(
+        var(--t42-tab-bar-tab-close-button-size) +
+            var(--t42-tab-bar-tab-close-button-padding) * 2
+    );
+    height: calc(
+        var(--t42-tab-bar-tab-close-button-size) +
+            var(--t42-tab-bar-tab-close-button-padding) * 2
+    );
+    border-radius: 50%;
+    background-color: transparent;
+    transition-property: background-color, fill;
+    justify-content: center;
+    align-items: center;
+}
+
+.t42-tab-close-button-content svg {
+    padding: var(--t42-tab-bar-tab-close-button-padding);
+    transition-property: fill;
+}
+
+.t42-tab-close-button-content .t42-standard-button-image {
+    fill: var(--t42-tab-bar-tab-text);
+}
+
+.t42-tab-close-button-content:hover {
+    background-color: var(--t42-tab-bar-tab-close-button-bg-hover);
+}
+
+.t42-tab-close-button-content:hover .t42-standard-button-image {
+    fill: var(--t42-tab-bar-tab-text-hover);
+}
+
+.t42-selected-tab-element {
+    background-color: var(--t42-tab-bar-selected-tab-background);
+}
+
+.t42-selected-tab::before {
+    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
+    height: var(--t42-tab-bar-tab-selected-separator-size);
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    display: block;
+    background-color: var(--t42-tab-bar-tab-selected-separator-color);
+    content: "";
+    z-index: 10;
+    transition-property: height;
+}
+
+.t42-selected-tab:hover::before {
+    width: calc(100% - var(--t42-tab-bar-tab-separator-size));
+    height: var(--t42-tab-bar-tab-selected-separator-size);
+    position: absolute;
+    left: 0px;
+    bottom: 0px;
+    display: block;
+    background-color: var(--t42-tab-bar-tab-selected-separator-color);
+    content: "";
+    z-index: 10;
+}
+
+.t42-selected-tab-caption {
+    color: var(--t42-tab-bar-selected-tab-text);
+}
+
+.t42-selected-tab-close-button-content .t42-standard-button-image {
+    fill: var(--t42-tab-bar-selected-tab-text);
+}
+
+.t42-channel-selector-content-light::before {
+    background-color: white;
+}
+
+.t42-channel-selector-content-dark::before {
+    background-color: black;
+}
+
+@keyframes approaching-edge-animation {
+    from {
+        background-color: var(--t42-approaching-edge-start-color);
+    }
+
+    to {
+        background-color: var(--t42-approaching-edge-end-color);
+    }
+}
+
+.t42-approaching-edge {
+    display: block;
+    position: absolute;
+    z-index: 100;
+    background-color: var(--t42-approaching-edge-start-color);
+    animation: approaching-edge-animation;
+    animation-duration: var(--t42-approaching-edge-animation-duration);
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+.t42-horizontal-approaching-edge {
+    height: var(--t42-approaching-edge-size);
+}
+
+.t42-vertical-approaching-edge {
+    width: var(--t42-approaching-edge-size);
+}
+
+.t42-skip-focus {
+    /* We used non-standard rule to have non-empty style */
+    -moz-user-focus: ignore;
+}