/* st-namespace-reference="../../../../src/StatisticsWidget/StatisticsItem/StatisticsItem.st.css" */
:import {
  -st-from: "../../Tooltip/Tooltip.st.css";
  -st-default: Tooltip;
}

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

:import {
  -st-from: '../../Foundation/stylable/colors.st.css';
  -st-named: B50, D60, F00;
}

:import {
  -st-from: '../../Foundation/stylable/easing.st.css';
  -st-named: ease-8;
}

.item {
  -st-extends: Focusable;
  -st-states: reducedSpacingAndImprovedLayout, clickable, size(enum(tiny, large)), alignItems(enum(start, center, end));
  position: relative;
  display: flex;
  overflow: hidden;
  flex: 1;
  flex-direction: column;
  box-sizing: border-box;
  white-space: nowrap;
  transition: background-color .3s value(ease-8);
}

.item:size(tiny) {
  padding: 24px;
}

.item:size(tiny):reducedSpacingAndImprovedLayout{
  padding: 12px 24px;
}

.item:size(large) {
  padding: 30px;
}

.item:size(large):reducedSpacingAndImprovedLayout{
  padding: 18px 24px;
}

.item:clickable {
  cursor: pointer;
}

.item:clickable:hover {
  background-color: value(B50);
}

.item:focus {
  outline: none;
}
.item:focus-visible {
  border-radius: 2px;
  box-shadow: 0 0 0 3px value(F00);
}

.item:not(:first-child)::before {
  position: absolute;
  top: 30px;
  left: 0;
  bottom: 30px;
  width: 1px;
  content: '';
  background-color: value(D60);
}

.item:clickable:not(:first-child):hover::before,
.item:clickable:hover + .item::before
{
  top: 0;
  bottom: 0;
}

.item:alignItems(start) {
  text-align: start;
}
.item:alignItems(center) {
  text-align: center;
}
.item:alignItems(end) {
  text-align: end;
}

.description {
  -st-states: alignItems(enum(start, center, end));
  display: flex;
}

.description:alignItems(start) {
  justify-content: start;
  align-items: start;
}
.description:alignItems(center) {
  justify-content: center;
  align-items: center;
}
.description:alignItems(end) {
  justify-content: end;
  align-items: end;
}

.info {
  display: block;
  margin-left: 6px;
}

.percentage {
  margin-top: auto;
  padding: 6px 13px;
}

.tooltip {
 -st-extends: Tooltip;
 width: auto;
}