wix-style-react/src/CardFolderTabs/CardFolderTabs.st.css

wix-style-react

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B10, F00, D10, D60, D80, D10-30, D10-10, D10-05;
}

:import {
  -st-from: '../Foundation/stylable/shadows.st.css';
  -st-named: s1, s3;
}

:import {
  -st-from: 'wix-ui-core/dist/src/hocs/Focusable/Focusable.st.css';
  -st-default: Focusable;
}

:import {
  -st-from: '../Text/Text.st.css';
  -st-default: Text;
}

.root {
  --maxWidth: 138px;
  -st-states: fluid;
}

.root:fluid {
  --maxWidth: 100%;
}

.headerWrapper {
  display: flex;
  margin-inline-end: 30px;
}

.root:fluid .headerWrapper {
  margin-inline-end: 0;
}

.button {
  -st-extends: Focusable;
  -st-states: selected, disabled, beforeSelected, afterSelected;

  display: flex;
  flex: 1 1 66px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  padding: 18px;
  min-width: 66px;
  max-width: var(--maxWidth);
  border-radius: 8px 8px 0 0;
  border: 0;
  background-color: value(D80);
  color: value(D10);
  outline: none;
  margin: 0;
  box-shadow: inset -1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
}

:global([dir='rtl']) .button {
  border-width: 0 0 1px 1px;
}

.buttonText {
  -st-extends: Text;
}

.button:hover:not(:disabled) .buttonText,
.button:selected .buttonText {
  color: value(B10);
}

.button:disabled .buttonText {
  color: value(D10-30);
}

.button:focus-visible {
  border: 3px solid value(F00) !important;
  padding: 15px 16px 16px 15px;
  height: 60px !important;
}

.button:selected {
  margin-bottom: -2px;
  border-width: 0 1px 2px 0;
  border-bottom: solid transparent;
  z-index: 1;
  box-shadow: 0px 0px 6px value(D10-10), 0px 0px 12px value(D10-05);
}

.button:selected:first-child {
  box-shadow: 3px 0px 3px value(D10-10), 3px 0px 6px value(D10-05);
}

.button:selected:last-child {
  box-shadow: -3px 0px 3px value(D10-10), -3px 0px 6px value(D10-05);
}

.button:afterSelected {
  box-shadow: inset 42px 4px 24px -24px value(D10-05), inset -1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
}
.button:beforeSelected {
  box-shadow: inset -42px 4px 24px -24px value(D10-05), inset 0px -1px 0px value(D10-10);
}

:global([dir='rtl']) .button {
  box-shadow: inset 1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
}

:global([dir='rtl']) .button:selected {
  border-width: 0 0 2px 1px;
  box-shadow: 0px 0px 6px value(D10-10), 0px 0px 12px value(D10-05);
}

:global([dir='rtl']) .button:selected:first-child {
  box-shadow: -3px 0px 3px value(D10-10), -3px 0px 6px value(D10-05);
}

:global([dir='rtl']) .button:selected:last-child {
  box-shadow: 3px 0px 3px value(D10-10), 3px 0px 6px value(D10-05);
}

:global([dir='rtl']) .button:afterSelected {
  box-shadow: inset -42px 4px 24px -24px value(D10-05), inset 1px 0px 0px value(D60), inset 0px -1px 0px value(D10-10);
}
:global([dir='rtl']) .button:beforeSelected {
  box-shadow: inset 42px 4px 24px -24px value(D10-05), inset 0px -1px 0px value(D10-10);
}

.tabContentWrapper {
  background-color: value(D80);
  border-radius: 0 8px 8px 8px;
  z-index: 1;
  position: relative;
}

.root:fluid .tabContentWrapper {
  border-radius: 0 0 8px 8px;
}

:global([dir='rtl']) .tabContentWrapper {
  border-radius: 8px 0 8px 8px;
}