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

:import {
  -st-from: '../Foundation/stylable/colors.st.css';
  -st-named: B00-24, B00-42, B00-60, B30, B40, B10, F00, D80, D10-10;
}

.root {
  -st-states: selected;
  display: flex;
  min-width: 24px;
  min-height: 24px;
  width: 100%;
  height: 100%;
}

.root:selected .button {
  box-shadow: 0 0 0 2px hsl(0, 0%, 100%), 0 0 0 3px value(B10);
}

.button {
  -st-extends: ButtonCore;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid value(B00-24);
  background-color: transparent;

  /* Disable native focus */
  outline: none;
}

.button:hover {
  border: 1px solid value(B00-60);
}

.button:disabled {
  background-color: value(D10-10);
  border: none;
}

.button:not(:disabled):focus-visible  {
  box-shadow: 0 0 0 3px value(F00);
}



/* st-namespace-reference="../../../src/FillPreview/FillPreview.st.css" */