.ui-sliding-panel-overlay {
  background-color: var(--tx-sliding-panel-overlay-background-color);
  bottom: 0;
  display: block;
  left: 0;
  position: var(--tx-sliding-panel-overlay-position);
  right: 0;
  top: 0;
  z-index: var(--tx-sliding-panel-overlay-z-index);

}

.ui-sliding-panel-overlay.ui-sliding-panel-overlay_hidden {
  display: none;
}

.ui-sliding-panel {
  background-color: var(--tx-generic-color-secondary);
  bottom: var(--tx-sliding-panel-panel-bottom);
  display: flex;
  flex-flow: var(--tx-sliding-panel-panel-flex-flow);
  font-family: var(--tx-generic-font-primary-font-family);
  margin: var(--tx-sliding-panel-panel-margin);
  max-width: var(--tx-sliding-panel-panel-max-width);
  min-width: var(--tx-sliding-panel-panel-min-width);
  opacity: var(--tx-sliding-panel-panel-opacity);
  position: var(--tx-sliding-panel-panel-position);
  top: var(--tx-sliding-panel-panel-top);

}

.ui-sliding-panel.ui-sliding-panel_active {
  opacity: var(--tx-sliding-panel-panel-open-opacity);
}

.ui-sliding-panel_right {
  animation: uiKitSidePanelClose 195ms ease-in-out 0s 1 both;
  left: var(--tx-sliding-panel-right-direction-left);
  right: var(--tx-sliding-panel-right-direction-right);

}

.ui-sliding-panel_right.ui-sliding-panel_active  {
  animation: uiKitSidePanelOpen 195ms ease-in-out 0s 1 both;
}

.ui-sliding-panel_left {
  animation: uiKitSidePanelLeftClose 195ms ease-in-out 0s 1 both;
  left: var(--tx-sliding-panel-left-direction-left);
  right: var(--tx-sliding-panel-left-direction-right);
}

.ui-sliding-panel_left.ui-sliding-panel_active  {
  animation: uiKitSidePanelLeftOpen 195ms ease-in-out 0s 1 both;
}

.ui-sliding-panel-content-wrapper {
  flex: var(--tx-sliding-panel-content-flex);
  overflow: var(--tx-sliding-panel-content-overflow);
  overflow-y: var(--tx-sliding-panel-content-overflow-y);
}

@keyframes uiKitSidePanelOpen {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes uiKitSidePanelClose {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes uiKitSidePanelLeftOpen {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes uiKitSidePanelLeftClose {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}