.puck {
    display: inline-block;
    position: relative;
    min-width: var(--puck-width, 2em);
    min-height: var(--puck-height, 2em);
    aspect-ratio: 1;
    line-height: normal;
    text-align: center;
    border-width: var(--puck-border-width, 0.25em);
    border-style: solid;
    border-radius: var(--puck-border-radius, var(--default-circle-border-radius, 50rem)) !important;
    border-color: var(--puck-border-color, #eee);
    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.7);
  }

  .puck-pallete {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 0.25em;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: #55555588;
    border-radius: var(--default-circle-border-radius, 50rem) !important;
    background-color:var(--puck-pallete-color, #fff);
    -moz-box-shadow: inset 0 0px 12px #00000040;
    -webkit-box-shadow: inset 0 0px 12px #00000040;
    box-shadow: inset 0 0px 12px #00000040;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    cursor: pointer;
  }

  .puck-pallete:hover {
    filter: brightness(var(--puck-pallete-hover-brightness, 125%));
  }