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

:import {
  -st-from: "../../colors.st.css";
  -st-named: 
  B10, B20, B50,
  D10, D20,
WHITE;
}

.root {
  -st-extends: Button;
  -st-states: skin(enum(standard, white, dark)), size(enum(small, large));

  box-sizing: border-box;
  
  display: flex;
  justify-content: center;
  align-items: center;

  background-color: transparent;
  border: none;

  cursor: pointer;
}

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

.root:skin(standard):hover {
  color: value(B20);
}

.root:skin(white) {
  color: value(WHITE);
}
.root:skin(white):hover {
  color: value(B50);
}

.root:skin(dark) {
  color: value(D10);
}
.root:skin(dark):hover {
  color: value(D20);
}

.root:size(small) {
  width: 18px;
  height: 18px;
}

/* svg sizing will be obsolete once we have 2 sets of icons which are based on 18x18 view and 24x24 view */
.root:size(small) svg {
  width: 6px;
  height: 6px;
}

.root:size(large) {
  width: 24px;
  height: 24px;
}
.root:size(large) svg {
  width: 8px;
  height: 8px;
}