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

:import {
  -st-from: "../../typography.st.css";
  -st-named: fontRoman;
}

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

.root {
  -st-extends: Thumbnail;
  margin: 19px 0;
  border: 1px solid value(B50);
  border-radius: 8px;
  cursor: pointer;
}

.root:selected {
  border: 2px solid value(B10);
}

.root:selected:hover {
  border: 2px solid value(B20);
}

.root:selected:disabled {
  border: 2px solid value(D55);
}

.root:disabled {
  border: 1px solid value(D55);
  cursor: default;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.root:selected::selectedIcon {
  background: value(B10);
  width: 24px;
  height: 24px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: value(WHITE);
}

.root:selected:hover:not(:disabled)::selectedIcon {
  background: value(B20);
}

.root:disabled::selectedIcon {
  background: value(D55);
}

.title {}

.description {}

.root:disabled .title, .root:disabled .description {
  color: value(D55);
}