:import {
  -st-from: "wix-ui-core/index.st.css";
  -st-named: Button;
}

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

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  B10, B20, B30, B40, B50,
  R10, R20,
  P10, P20,
  WHITE,
}

.root {
  -st-extends: Button;
  -st-states: skin(enum(standard, white, destructive, premium)), priority(enum(primary, secondary)), size(enum(large, medium, small, tiny));

  box-sizing: border-box;

  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 18px; /* common to all but large */

  cursor: pointer;
}

.text {
  -st-extends: Text;
}
/*skins ans priority*/

:vars {
  skinStandardColor: value(B10);
  skinStandardHoverColor: value(B20);
  skinWhiteColor: value(WHITE);
  skinWhiteHoverColor: value(B50);
  skinDestructiveColor: value(R10);
  skinDestructiveHoverColor: value(R20);
  skinPremiumColor: value(P10);
  skinPremiumHoverColor: value(P20);
}

.root:skin(standard):priority(primary) {
  background-color: value(skinStandardColor);
  border-color: value(skinStandardColor);
}

.root:skin(standard):priority(secondary) {
  background-color: transparent;
  border-color: value(skinStandardColor);
}

.root:skin(standard):priority(secondary) .text{
  color: value(B10);
}

.root:skin(standard):priority(secondary):hover .text{
  color: value(WHITE);
}

.root:skin(white):priority(primary) {
  background-color: value(skinWhiteColor);
  border-color: value(skinWhiteColor);
}

.root:skin(white):priority(secondary) {
  background-color: transparent;
  border-color: value(skinWhiteColor);
}

.root:skin(white):priority(secondary):hover .text{
  color: value(B10)
}

.root:skin(destructive):priority(primary) {
  background-color: value(skinDestructiveColor);
  border-color: value(skinDestructiveColor);
}

.root:skin(destructive):priority(secondary) {
  background-color: transparent;
  border-color: value(skinDestructiveColor);
}

.root:skin(premium):priority(primary) {
  background-color: value(skinPremiumColor);
  border-color: value(skinPremiumColor);
}

.root:skin(premium):priority(secondary) {
  background-color: transparent;
  border-color: value(skinPremiumColor);
}

/*hover*/
.root:skin(standard):priority(secondary):hover, .root:skin(standard):priority(primary):hover {
  background-color: value(skinStandardHoverColor);
  border-color: value(skinStandardHoverColor);
}

.root:skin(white):priority(primary):hover, .root:skin(white):priority(secondary):hover {
  background-color: value(skinWhiteHoverColor);
  border-color: value(skinWhiteHoverColor);
}

.root:skin(destructive):priority(primary):hover, .root:skin(destructive):priority(secondary):hover {
  background-color: value(skinDestructiveHoverColor);
  border-color: value(skinDestructiveHoverColor);
}

.root:skin(premium):priority(primary):hover, .root:skin(premium):priority(secondary):hover {
  background-color: value(skinPremiumHoverColor);
  border-color: value(skinPremiumHoverColor);
}

/*size*/

.root:size(large) {
  height: 42px;
  border-radius: 24px;
  padding-right: 30px;
  padding-left: 30px;
}

.root:size(medium) {
  height: 36px;
  padding-right: 24px;
  padding-left: 24px;
}

.root:size(small) {
  height: 30px;
  padding-right: 18px;
  padding-left: 18px;
}

.root:size(tiny) {
  height: 24;
  padding-right: 12px;
  padding-left: 12px;
}