@st-namespace 'ReactionList-deprecated-st-css';
:import {
    -st-from: "../../../common/formatters.st";
    -st-named: color, font, fallback;
}

/* Defaults - default params */
:vars {
  defaultFont: font("{theme: 'Body-M', size: '12px', lineHeight: '1.4'}");
  labelHeight: 20px;
}

.root {
  font: value(defaultFont);
  display: flex;
  flex-direction: row;
  position: relative;
  padding: 4px 12px;
}

.item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
  margin-inline-start: 1px;
}
.item:first-child{
  margin: 0;
}

.item:hover .itemLabel,
:global(#SITE_CONTAINER.focus-ring-active) .item.active .itemLabel,
:global(#SITE_CONTAINER.focus-ring-active) .item:focus .itemLabel {
  display: flex;
}

.item:hover .iconWrapper,
:global(#SITE_CONTAINER.focus-ring-active) .item:focus .iconWrapper {
  transform: scale(1.3333)
}

.iconWrapper {
  width: 24px;
  height: 24px;
  transition: all 0.1s ease-out;
}

.iconWrapper svg {
  vertical-align: middle;
}

.itemLabel {
  display: none;
  position: absolute;
  align-items: center;
  padding: 0px 12px;
  top: calc(0px - value(labelHeight) - 6px);
  height: value(labelHeight);
  border-radius: 12px;
  font-size: 12px;
  color: #fff;
  background: rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}



/* st-namespace-reference="../../../../../src/components/Reactions/ReactionList/ReactionList.deprecated.st.css" */