smart-webcomponents-react 19.0.0 → 19.0.5

package/source/styles/default/smart.path.css

@@ -1,582 +1,582 @@
-.smart-path-item {
-  box-sizing: border-box;
-  transition: opacity 280ms ease-in-out;
-  overflow: hidden;
-  white-space: nowrap;
-  display: flex;
-  position: relative;
-  align-items: flex-start;
-  flex-direction: column;
-  justify-content: center;
-  padding: 9px 12px;
-  width: 100%;
-  height: calc(100% - var(--smart-list-item-vertical-offset));
-  left: 0;
-  top: 0;
-  color: var(--smart-background-color);
-  border-width: var(--smart-border-width);
-  border-style: solid;
-  border-color: transparent;
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-.smart-path-item .smart-ripple {
-  background: var(--smart-ui-state-active);
-}
-.smart-path-item[disabled] {
-  opacity: 0.55;
-  cursor: default;
-  pointer-events: none;
-  user-select: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-}
-.smart-path-item[hover] {
-  color: var(--smart-ui-state-color-hover);
-  border-color: var(--smart-ui-state-border-hover);
-  background-color: var(--smart-ui-state-hover);
-}
-.smart-path-item[active] {
-  color: var(--smart-ui-state-color-active);
-  border-color: var(--smart-ui-state-border-active);
-  background-color: var(--smart-ui-state-active);
-  opacity: 1;
-}
-.smart-path-item[focus] {
-  color: var(--smart-primary-color);
-  border-color: var(--smart-primary);
-  background-color: var(--smart-primary);
-}
-
-smart-path .smart-ripple {
-  background: var(--smart-ui-state-active);
-}
-
-/* smart-path */
-.smart-path {
-  display: block;
-  width: var(--smart-path-default-width);
-  height: var(--smart-path-default-height);
-  background: var(--smart-background);
-  color: var(--smart-background-color);
-  border-color: var(--smart-border);
-}
-.smart-path.smart-container {
-  display: block;
-  width: var(--smart-path-default-width);
-  height: var(--smart-path-default-height);
-  background: var(--smart-background);
-  color: var(--smart-background-color);
-  border-color: var(--smart-border);
-}
-.smart-path > .smart-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-.smart-path .smart-content {
-  position: relative;
-  cursor: pointer;
-  display: flex;
-  width: 100%;
-  height: 100%;
-}
-.smart-path .smart-content .smart-input::selection {
-  background: var(--smart-editor-selection);
-  color: var(--smart-editor-selection-color);
-}
-.smart-path .smart-input,
-.smart-path input.smart-input {
-  cursor: initial;
-  outline: 1px solid transparent;
-  width: 100%;
-  height: 100%;
-  border: none;
-  min-height: 100%;
-  vertical-align: middle;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: inherit;
-  margin: 0;
-  /* Safari */
-  color: inherit;
-  background: var(--smart-background);
-  text-align: var(--smart-path-text-align);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.smart-path .smart-input:focus {
-  outline: initial;
-  border-color: var(--smart-primary);
-  background-color: var(--smart-background);
-  color: var(--smart-background-color);
-}
-.smart-path .smart-input::-webkit-input-placeholder, .smart-path .smart-input::placeholder {
-  color: var(--smart-disabled-color);
-  font-style: italic;
-}
-.smart-path .smart-input[hover] {
-  border-color: var(--smart-ui-state-border-hover);
-}
-.smart-path .smart-input[position-absolute] {
-  position: absolute;
-}
-.smart-path div.smart-input {
-  padding: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) calc(var(--smart-editor-label-padding) - var(--smart-border-width)) calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) calc(var(--smart-editor-label-padding) - var(--smart-border-width));
-  outline: none;
-  background: initial;
-  overflow-y: auto;
-  overflow-x: hidden;
-  scrollbar-width: none;
-  /* Firefox way of hidding the scrollbars */
-}
-.smart-path div.smart-input:after {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  white-space: nowrap;
-  font-size: var(--smart-arrow-size);
-  color: var(--smart-disabled-color);
-  font-style: italic;
-  content: attr(placeholder);
-  justify-content: initial;
-  left: 0;
-  padding: 0 var(--smart-editor-label-padding) 0 var(--smart-editor-label-padding);
-  opacity: 0;
-}
-.smart-path div.smart-input[show-placeholder]:after {
-  opacity: 1;
-}
-.smart-path .smart-buttons-container {
-  display: grid;
-  width: 100%;
-  grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr) var(--smart-editor-addon-width);
-  grid-column-gap: var(--smart-path-button-gap);
-}
-.smart-path .smart-label,
-.smart-path .smart-hint {
-  display: none;
-  position: absolute;
-}
-.smart-path .smart-drop-down.smart-visibility-hidden {
-  transform: scale(0);
-  transition: transform 0.2s ease-in;
-  transform-origin: left top 0px;
-}
-.smart-path .smart-drop-down-button,
-.smart-path .smart-browse-button {
-  font-family: var(--smart-font-family-icon);
-  font-size: 10px;
-  width: var(--smart-editor-addon-width);
-  min-width: var(--smart-editor-addon-width);
-  min-height: var(--smart-editor-height);
-  height: 100%;
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  outline: 1px solid transparent;
-  cursor: pointer;
-  overflow: hidden;
-  position: relative;
-  background: var(--smart-surface);
-  border-width: var(--smart-border-width);
-  border-style: solid;
-  color: var(--smart-background-color);
-  border-color: var(--smart-border);
-  transition: background-color 100ms linear;
-}
-.smart-path .smart-drop-down-button span,
-.smart-path .smart-browse-button span {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-  pointer-events: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.smart-path .smart-drop-down-button span:not(.smart-ripple):after,
-.smart-path .smart-browse-button span:not(.smart-ripple):after {
-  position: absolute;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  width: 100%;
-  height: 100%;
-  top: 0;
-  white-space: nowrap;
-}
-.smart-path .smart-drop-down-button[hover],
-.smart-path .smart-browse-button[hover] {
-  color: var(--smart-ui-state-color-hover);
-  background: var(--smart-ui-state-hover);
-  border-color: var(--smart-ui-state-border-hover);
-}
-.smart-path .smart-drop-down-button[active], .smart-path .smart-drop-down-button:active,
-.smart-path .smart-browse-button[active],
-.smart-path .smart-browse-button:active {
-  color: var(--smart-ui-state-color-active);
-  background: var(--smart-ui-state-active);
-  border-color: var(--smart-ui-state-border-active);
-}
-.smart-path .smart-drop-down-button {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-}
-.smart-path .smart-drop-down-button span:not(.smart-ripple):after {
-  content: var(--smart-icon-arrow-down);
-  font-size: var(--smart-arrow-size);
-}
-.smart-path .smart-browse-button {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-}
-.smart-path .smart-browse-button span:not(.smart-ripple):after {
-  content: "...";
-  font-weight: 600;
-  font-size: 1rem;
-}
-.smart-path .smart-path-input-container {
-  position: relative;
-  overflow: hidden;
-  /*width: 100%;*/
-  border-style: solid;
-  border-color: var(--smart-border);
-  border-width: var(--smart-border-width);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.smart-path .smart-path-input-wrapper {
-  position: absolute;
-  top: 0;
-  left: 0;
-  opacity: 0;
-  text-align: var(--smart-path-text-align);
-  padding: 0 var(--smart-editor-label-padding) 0 var(--smart-editor-label-padding);
-  vertical-align: middle;
-  outline: none;
-  pointer-events: none;
-  visibility: hidden;
-  white-space: nowrap;
-}
-.smart-path .smart-path-input-wrapper::-moz-focus-inner {
-  border: 0;
-}
-@-moz-document url-prefix() {
-  .smart-path .smart-path-input-wrapper {
-    line-height: 1rem;
-  }
-}
-.smart-path .smart-path-multiline-container {
-  cursor: initial;
-  outline: 1px solid transparent;
-  width: 100%;
-  height: 100%;
-  border: none;
-  min-height: 100%;
-  vertical-align: middle;
-  font-size: inherit;
-  font-family: inherit;
-  background-color: inherit;
-  margin: 0;
-  /* Safari */
-  color: inherit;
-  background: var(--smart-background);
-  text-align: var(--smart-path-text-align);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  overflow: hidden;
-  position: relative;
-  padding: initial;
-  border: none;
-}
-.smart-path .smart-path-multiline-container .smart-input::-webkit-scrollbar {
-  width: 0;
-}
-.smart-path:not([animation=none])[hint] .smart-hint {
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
-}
-.smart-path:not([animation=none])[hint][focus] .smart-hint {
-  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
-}
-.smart-path[readonly] .smart-input {
-  user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -webkit-user-select: none;
-}
-.smart-path[indicator] .smart-input {
-  background: var(--smart-surface);
-}
-.smart-path[indicator] .smart-path-input-container {
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
-}
-.smart-path[indicator] .smart-browse-button {
-  display: none;
-}
-.smart-path[indicator] .smart-buttons-container {
-  grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr);
-}
-.smart-path[disabled] input {
-  user-select: none;
-  -moz-user-select: none;
-  -webkit-user-select: none;
-  cursor: default;
-  background-color: initial;
-}
-.smart-path[disabled] > .smart-container,
-.smart-path[disabled] .smart-drop-down-button,
-.smart-path[disabled] .smart-browse-button {
-  cursor: default;
-  background-color: initial;
-}
-.smart-path[focus] .smart-path-input-container {
-  outline: initial;
-  border-color: var(--smart-primary);
-  background-color: var(--smart-background);
-  color: var(--smart-background-color);
-}
-.smart-path[focus] .smart-drop-down-button {
-  outline: initial;
-  border-color: var(--smart-primary);
-  outline: initial;
-  background-color: var(--smart-surface);
-  color: var(--smart-background-color);
-}
-.smart-path[focus] .smart-browse-button {
-  outline: initial;
-  border-color: var(--smart-primary);
-  background-color: var(--smart-surface);
-  color: var(--smart-background-color);
-}
-.smart-path[label][hint] > .smart-container {
-  display: flex;
-  position: relative;
-  align-items: center;
-}
-.smart-path[label] > .smart-container {
-  align-items: flex-end;
-}
-.smart-path[label] .smart-label {
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-  font-size: 12px;
-  width: 100%;
-  display: block;
-  padding: var(--smart-editor-label-padding);
-  pointer-events: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  text-align: initial;
-  line-height: initial;
-  vertical-align: initial;
-}
-.smart-path[hint] > .smart-container {
-  align-items: flex-start;
-}
-.smart-path[hint] .smart-hint {
-  position: absolute;
-  left: 0;
-  bottom: 100%;
-  font-size: 12px;
-  width: 100%;
-  display: block;
-  padding: var(--smart-editor-label-padding);
-  pointer-events: none;
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  -moz-user-select: none;
-  user-select: none;
-  text-align: initial;
-  line-height: initial;
-  vertical-align: initial;
-  opacity: 0;
-  top: 100%;
-  bottom: initial;
-}
-.smart-path[hint][focus] .smart-hint {
-  opacity: 1;
-}
-.smart-path[opened] .smart-drop-down-button {
-  color: var(--smart-ui-state-color-active);
-  background: var(--smart-ui-state-active);
-  border-color: var(--smart-ui-state-border-active);
-}
-.smart-path[wrap] .smart-path-input-wrapper {
-  padding-top: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width));
-  padding-bottom: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width));
-}
-.smart-path.outlined {
-  background-color: transparent;
-  color: inherit;
-}
-.smart-path.outlined[label] .smart-label {
-  top: -11px;
-  left: var(--smart-editor-label-padding);
-  background: var(--smart-background);
-  color: var(--smart-background-color);
-  z-index: 1;
-  height: auto;
-  min-height: 20px;
-  width: auto;
-  transition: all 0.2s ease;
-  transform: scale(1);
-}
-.smart-path.outlined[label][focus] .smart-label {
-  transform: scale(0.8);
-  color: var(--smart-primary);
-}
-.smart-path.outlined[hover] .smart-drop-down-button {
-  color: var(--smart-ui-state-color-hover);
-  border-color: var(--smart-ui-state-border-hover);
-  background-color: var(--smart-ui-state-hover);
-}
-.smart-path.underlined {
-  background-color: transparent;
-  color: inherit;
-}
-.smart-path.underlined .smart-input {
-  border-top-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-.smart-path.underlined .smart-input[active] {
-  background-color: var(--smart-ui-state-active);
-  color: var(--smart-ui-state-color-active);
-}
-.smart-path.underlined .smart-path-input-container {
-  border-top-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-.smart-path.underlined .smart-path-input-container:after {
-  border-bottom-color: var(--smart-primary);
-  content: "";
-  width: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-}
-.smart-path.underlined .smart-drop-down-button,
-.smart-path.underlined .smart-browse-button {
-  border-top-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-}
-.smart-path.underlined .smart-drop-down-button:after,
-.smart-path.underlined .smart-browse-button:after {
-  border-bottom-color: var(--smart-primary);
-  content: "";
-  width: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-}
-.smart-path.underlined .smart-drop-down-button[active],
-.smart-path.underlined .smart-browse-button[active] {
-  background-color: var(--smart-ui-state-active);
-  color: var(--smart-ui-state-color-active);
-}
-.smart-path.underlined:not([opened]) .smart-input {
-  background-color: transparent;
-  color: inherit;
-  border-radius: initial;
-}
-.smart-path.underlined:not([opened]):not([hover]) .smart-drop-down-button,
-.smart-path.underlined:not([opened]):not([hover]) .smart-browse-button {
-  background-color: transparent;
-  color: inherit;
-  border-radius: initial;
-}
-.smart-path.underlined:not([hover]) .smart-drop-down-button:focus,
-.smart-path.underlined:not([hover]) .smart-browse-button:focus {
-  box-shadow: none;
-}
-.smart-path.underlined:not([hover]) .smart-input:focus {
-  box-shadow: none;
-  z-index: initial;
-}
-.smart-path.underlined[hover]:not([opened]) .smart-input {
-  border-top-color: transparent;
-  border-left-color: transparent;
-  border-right-color: transparent;
-  background-color: transparent;
-}
-.smart-path.underlined[focus] .smart-drop-down-button:after,
-.smart-path.underlined[focus] .smart-browse-button:after,
-.smart-path.underlined[focus] .smart-path-input-container:after {
-  width: 100%;
-}
-.smart-path.underlined[label] .smart-label {
-  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
-  transform: scale(1);
-  transform-origin: top left;
-}
-.smart-path.underlined[label][value=""] .smart-label {
-  bottom: 0px;
-}
-.smart-path.underlined[label][focus] .smart-label, .smart-path.underlined[label][opened] .smart-label {
-  transform: scale(0.8);
-  color: var(--smart-primary);
-  bottom: 100%;
-}
-
-/* smart-path */
-.smart-path[right-to-left] > .smart-container {
-  direction: rtl;
-}
-.smart-path[right-to-left] .smart-browse-button {
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-.smart-path[right-to-left] .smart-drop-down-button {
-  border-top-right-radius: var(--smart-border-top-right-radius);
-  border-bottom-right-radius: var(--smart-border-bottom-left-radius);
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-.smart-path[right-to-left][indicator] .smart-path-input-container {
-  border-top-left-radius: var(--smart-border-top-left-radius);
-  border-top-right-radius: 0;
-  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
-  border-bottom-right-radius: 0;
-}
-
-.smart-drop-down.smart-drop-down-repositioned[right-to-left] {
-  direction: rtl;
+.smart-path-item {
+  box-sizing: border-box;
+  transition: opacity 280ms ease-in-out;
+  overflow: hidden;
+  white-space: nowrap;
+  display: flex;
+  position: relative;
+  align-items: flex-start;
+  flex-direction: column;
+  justify-content: center;
+  padding: 9px 12px;
+  width: 100%;
+  height: calc(100% - var(--smart-list-item-vertical-offset));
+  left: 0;
+  top: 0;
+  color: var(--smart-background-color);
+  border-width: var(--smart-border-width);
+  border-style: solid;
+  border-color: transparent;
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+.smart-path-item .smart-ripple {
+  background: var(--smart-ui-state-active);
+}
+.smart-path-item[disabled] {
+  opacity: 0.55;
+  cursor: default;
+  pointer-events: none;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+}
+.smart-path-item[hover] {
+  color: var(--smart-ui-state-color-hover);
+  border-color: var(--smart-ui-state-border-hover);
+  background-color: var(--smart-ui-state-hover);
+}
+.smart-path-item[active] {
+  color: var(--smart-ui-state-color-active);
+  border-color: var(--smart-ui-state-border-active);
+  background-color: var(--smart-ui-state-active);
+  opacity: 1;
+}
+.smart-path-item[focus] {
+  color: var(--smart-primary-color);
+  border-color: var(--smart-primary);
+  background-color: var(--smart-primary);
+}
+
+smart-path .smart-ripple {
+  background: var(--smart-ui-state-active);
+}
+
+/* smart-path */
+.smart-path {
+  display: block;
+  width: var(--smart-path-default-width);
+  height: var(--smart-path-default-height);
+  background: var(--smart-background);
+  color: var(--smart-background-color);
+  border-color: var(--smart-border);
+}
+.smart-path.smart-container {
+  display: block;
+  width: var(--smart-path-default-width);
+  height: var(--smart-path-default-height);
+  background: var(--smart-background);
+  color: var(--smart-background-color);
+  border-color: var(--smart-border);
+}
+.smart-path > .smart-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+.smart-path .smart-content {
+  position: relative;
+  cursor: pointer;
+  display: flex;
+  width: 100%;
+  height: 100%;
+}
+.smart-path .smart-content .smart-input::selection {
+  background: var(--smart-editor-selection);
+  color: var(--smart-editor-selection-color);
+}
+.smart-path .smart-input,
+.smart-path input.smart-input {
+  cursor: initial;
+  outline: 1px solid transparent;
+  width: 100%;
+  height: 100%;
+  border: none;
+  min-height: 100%;
+  vertical-align: middle;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: inherit;
+  margin: 0;
+  /* Safari */
+  color: inherit;
+  background: var(--smart-background);
+  text-align: var(--smart-path-text-align);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.smart-path .smart-input:focus {
+  outline: initial;
+  border-color: var(--smart-primary);
+  background-color: var(--smart-background);
+  color: var(--smart-background-color);
+}
+.smart-path .smart-input::-webkit-input-placeholder, .smart-path .smart-input::placeholder {
+  color: var(--smart-disabled-color);
+  font-style: italic;
+}
+.smart-path .smart-input[hover] {
+  border-color: var(--smart-ui-state-border-hover);
+}
+.smart-path .smart-input[position-absolute] {
+  position: absolute;
+}
+.smart-path div.smart-input {
+  padding: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) calc(var(--smart-editor-label-padding) - var(--smart-border-width)) calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width)) calc(var(--smart-editor-label-padding) - var(--smart-border-width));
+  outline: none;
+  background: initial;
+  overflow-y: auto;
+  overflow-x: hidden;
+  scrollbar-width: none;
+  /* Firefox way of hidding the scrollbars */
+}
+.smart-path div.smart-input:after {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  white-space: nowrap;
+  font-size: var(--smart-arrow-size);
+  color: var(--smart-disabled-color);
+  font-style: italic;
+  content: attr(placeholder);
+  justify-content: initial;
+  left: 0;
+  padding: 0 var(--smart-editor-label-padding) 0 var(--smart-editor-label-padding);
+  opacity: 0;
+}
+.smart-path div.smart-input[show-placeholder]:after {
+  opacity: 1;
+}
+.smart-path .smart-buttons-container {
+  display: grid;
+  width: 100%;
+  grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr) var(--smart-editor-addon-width);
+  grid-column-gap: var(--smart-path-button-gap);
+}
+.smart-path .smart-label,
+.smart-path .smart-hint {
+  display: none;
+  position: absolute;
+}
+.smart-path .smart-drop-down.smart-visibility-hidden {
+  transform: scale(0);
+  transition: transform 0.2s ease-in;
+  transform-origin: left top 0px;
+}
+.smart-path .smart-drop-down-button,
+.smart-path .smart-browse-button {
+  font-family: var(--smart-font-family-icon);
+  font-size: 10px;
+  width: var(--smart-editor-addon-width);
+  min-width: var(--smart-editor-addon-width);
+  min-height: var(--smart-editor-height);
+  height: 100%;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  outline: 1px solid transparent;
+  cursor: pointer;
+  overflow: hidden;
+  position: relative;
+  background: var(--smart-surface);
+  border-width: var(--smart-border-width);
+  border-style: solid;
+  color: var(--smart-background-color);
+  border-color: var(--smart-border);
+  transition: background-color 100ms linear;
+}
+.smart-path .smart-drop-down-button span,
+.smart-path .smart-browse-button span {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  pointer-events: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.smart-path .smart-drop-down-button span:not(.smart-ripple):after,
+.smart-path .smart-browse-button span:not(.smart-ripple):after {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  white-space: nowrap;
+}
+.smart-path .smart-drop-down-button[hover],
+.smart-path .smart-browse-button[hover] {
+  color: var(--smart-ui-state-color-hover);
+  background: var(--smart-ui-state-hover);
+  border-color: var(--smart-ui-state-border-hover);
+}
+.smart-path .smart-drop-down-button[active], .smart-path .smart-drop-down-button:active,
+.smart-path .smart-browse-button[active],
+.smart-path .smart-browse-button:active {
+  color: var(--smart-ui-state-color-active);
+  background: var(--smart-ui-state-active);
+  border-color: var(--smart-ui-state-border-active);
+}
+.smart-path .smart-drop-down-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+}
+.smart-path .smart-drop-down-button span:not(.smart-ripple):after {
+  content: var(--smart-icon-arrow-down);
+  font-size: var(--smart-arrow-size);
+}
+.smart-path .smart-browse-button {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+}
+.smart-path .smart-browse-button span:not(.smart-ripple):after {
+  content: "...";
+  font-weight: 600;
+  font-size: 1rem;
+}
+.smart-path .smart-path-input-container {
+  position: relative;
+  overflow: hidden;
+  /*width: 100%;*/
+  border-style: solid;
+  border-color: var(--smart-border);
+  border-width: var(--smart-border-width);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.smart-path .smart-path-input-wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  text-align: var(--smart-path-text-align);
+  padding: 0 var(--smart-editor-label-padding) 0 var(--smart-editor-label-padding);
+  vertical-align: middle;
+  outline: none;
+  pointer-events: none;
+  visibility: hidden;
+  white-space: nowrap;
+}
+.smart-path .smart-path-input-wrapper::-moz-focus-inner {
+  border: 0;
+}
+@-moz-document url-prefix() {
+  .smart-path .smart-path-input-wrapper {
+    line-height: 1rem;
+  }
+}
+.smart-path .smart-path-multiline-container {
+  cursor: initial;
+  outline: 1px solid transparent;
+  width: 100%;
+  height: 100%;
+  border: none;
+  min-height: 100%;
+  vertical-align: middle;
+  font-size: inherit;
+  font-family: inherit;
+  background-color: inherit;
+  margin: 0;
+  /* Safari */
+  color: inherit;
+  background: var(--smart-background);
+  text-align: var(--smart-path-text-align);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  overflow: hidden;
+  position: relative;
+  padding: initial;
+  border: none;
+}
+.smart-path .smart-path-multiline-container .smart-input::-webkit-scrollbar {
+  width: 0;
+}
+.smart-path:not([animation=none])[hint] .smart-hint {
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
+}
+.smart-path:not([animation=none])[hint][focus] .smart-hint {
+  transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.smart-path[readonly] .smart-input {
+  user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -webkit-user-select: none;
+}
+.smart-path[indicator] .smart-input {
+  background: var(--smart-surface);
+}
+.smart-path[indicator] .smart-path-input-container {
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
+}
+.smart-path[indicator] .smart-browse-button {
+  display: none;
+}
+.smart-path[indicator] .smart-buttons-container {
+  grid-template-columns: var(--smart-editor-addon-width) minmax(0, 1fr);
+}
+.smart-path[disabled] input {
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  cursor: default;
+  background-color: initial;
+}
+.smart-path[disabled] > .smart-container,
+.smart-path[disabled] .smart-drop-down-button,
+.smart-path[disabled] .smart-browse-button {
+  cursor: default;
+  background-color: initial;
+}
+.smart-path[focus] .smart-path-input-container {
+  outline: initial;
+  border-color: var(--smart-primary);
+  background-color: var(--smart-background);
+  color: var(--smart-background-color);
+}
+.smart-path[focus] .smart-drop-down-button {
+  outline: initial;
+  border-color: var(--smart-primary);
+  outline: initial;
+  background-color: var(--smart-surface);
+  color: var(--smart-background-color);
+}
+.smart-path[focus] .smart-browse-button {
+  outline: initial;
+  border-color: var(--smart-primary);
+  background-color: var(--smart-surface);
+  color: var(--smart-background-color);
+}
+.smart-path[label][hint] > .smart-container {
+  display: flex;
+  position: relative;
+  align-items: center;
+}
+.smart-path[label] > .smart-container {
+  align-items: flex-end;
+}
+.smart-path[label] .smart-label {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  font-size: 12px;
+  width: 100%;
+  display: block;
+  padding: var(--smart-editor-label-padding);
+  pointer-events: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  text-align: initial;
+  line-height: initial;
+  vertical-align: initial;
+}
+.smart-path[hint] > .smart-container {
+  align-items: flex-start;
+}
+.smart-path[hint] .smart-hint {
+  position: absolute;
+  left: 0;
+  bottom: 100%;
+  font-size: 12px;
+  width: 100%;
+  display: block;
+  padding: var(--smart-editor-label-padding);
+  pointer-events: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  text-align: initial;
+  line-height: initial;
+  vertical-align: initial;
+  opacity: 0;
+  top: 100%;
+  bottom: initial;
+}
+.smart-path[hint][focus] .smart-hint {
+  opacity: 1;
+}
+.smart-path[opened] .smart-drop-down-button {
+  color: var(--smart-ui-state-color-active);
+  background: var(--smart-ui-state-active);
+  border-color: var(--smart-ui-state-border-active);
+}
+.smart-path[wrap] .smart-path-input-wrapper {
+  padding-top: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width));
+  padding-bottom: calc(var(--smart-editor-label-padding) + 2 * var(--smart-border-width));
+}
+.smart-path.outlined {
+  background-color: transparent;
+  color: inherit;
+}
+.smart-path.outlined[label] .smart-label {
+  top: -11px;
+  left: var(--smart-editor-label-padding);
+  background: var(--smart-background);
+  color: var(--smart-background-color);
+  z-index: 1;
+  height: auto;
+  min-height: 20px;
+  width: auto;
+  transition: all 0.2s ease;
+  transform: scale(1);
+}
+.smart-path.outlined[label][focus] .smart-label {
+  transform: scale(0.8);
+  color: var(--smart-primary);
+}
+.smart-path.outlined[hover] .smart-drop-down-button {
+  color: var(--smart-ui-state-color-hover);
+  border-color: var(--smart-ui-state-border-hover);
+  background-color: var(--smart-ui-state-hover);
+}
+.smart-path.underlined {
+  background-color: transparent;
+  color: inherit;
+}
+.smart-path.underlined .smart-input {
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.smart-path.underlined .smart-input[active] {
+  background-color: var(--smart-ui-state-active);
+  color: var(--smart-ui-state-color-active);
+}
+.smart-path.underlined .smart-path-input-container {
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.smart-path.underlined .smart-path-input-container:after {
+  border-bottom-color: var(--smart-primary);
+  content: "";
+  width: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+.smart-path.underlined .smart-drop-down-button,
+.smart-path.underlined .smart-browse-button {
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+}
+.smart-path.underlined .smart-drop-down-button:after,
+.smart-path.underlined .smart-browse-button:after {
+  border-bottom-color: var(--smart-primary);
+  content: "";
+  width: 0;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+}
+.smart-path.underlined .smart-drop-down-button[active],
+.smart-path.underlined .smart-browse-button[active] {
+  background-color: var(--smart-ui-state-active);
+  color: var(--smart-ui-state-color-active);
+}
+.smart-path.underlined:not([opened]) .smart-input {
+  background-color: transparent;
+  color: inherit;
+  border-radius: initial;
+}
+.smart-path.underlined:not([opened]):not([hover]) .smart-drop-down-button,
+.smart-path.underlined:not([opened]):not([hover]) .smart-browse-button {
+  background-color: transparent;
+  color: inherit;
+  border-radius: initial;
+}
+.smart-path.underlined:not([hover]) .smart-drop-down-button:focus,
+.smart-path.underlined:not([hover]) .smart-browse-button:focus {
+  box-shadow: none;
+}
+.smart-path.underlined:not([hover]) .smart-input:focus {
+  box-shadow: none;
+  z-index: initial;
+}
+.smart-path.underlined[hover]:not([opened]) .smart-input {
+  border-top-color: transparent;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  background-color: transparent;
+}
+.smart-path.underlined[focus] .smart-drop-down-button:after,
+.smart-path.underlined[focus] .smart-browse-button:after,
+.smart-path.underlined[focus] .smart-path-input-container:after {
+  width: 100%;
+}
+.smart-path.underlined[label] .smart-label {
+  transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
+  transform: scale(1);
+  transform-origin: top left;
+}
+.smart-path.underlined[label][value=""] .smart-label {
+  bottom: 0px;
+}
+.smart-path.underlined[label][focus] .smart-label, .smart-path.underlined[label][opened] .smart-label {
+  transform: scale(0.8);
+  color: var(--smart-primary);
+  bottom: 100%;
+}
+
+/* smart-path */
+.smart-path[right-to-left] > .smart-container {
+  direction: rtl;
+}
+.smart-path[right-to-left] .smart-browse-button {
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+.smart-path[right-to-left] .smart-drop-down-button {
+  border-top-right-radius: var(--smart-border-top-right-radius);
+  border-bottom-right-radius: var(--smart-border-bottom-left-radius);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.smart-path[right-to-left][indicator] .smart-path-input-container {
+  border-top-left-radius: var(--smart-border-top-left-radius);
+  border-top-right-radius: 0;
+  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
+  border-bottom-right-radius: 0;
+}
+
+.smart-drop-down.smart-drop-down-repositioned[right-to-left] {
+  direction: rtl;
 }