.colour{border-radius:50%;width:36px;height:36px;display:inline-block}.colour.colour--mini{width:21px;height:21px}.colour.colour--tiny{width:9px;height:9px}.colour.colour--active{outline:3px solid var(--text-1)}.colour-picker .colour-picker__colours{grid-template-columns:repeat(5,1fr);gap:12px;width:100%;display:grid}.colour-picker .colour-picker__colours .colour{aspect-ratio:1;cursor:pointer;border-radius:50%;width:auto;height:auto;transition:all 50ms linear}.colour-picker .colour-picker__colours .colour:not(.colour--active):hover{outline:3px solid var(--edge-action)}.colour-picker .colour-picker__input{margin:24px 0 0;position:relative}.colour-picker .colour-picker__input input[type=text]{padding-left:38px}.colour-picker .colour-picker__input .preview{border-radius:50%;width:18px;height:18px;margin-top:-9px;position:absolute;top:50%;left:12px}@media (width>=426px){.colour-picker .colour-picker__colours{grid-template-columns:repeat(10,1fr);width:420px}}