/* Decorative badges on the existing customer actions. */
#customer .cw-actions .cw-action{
  border-radius:20px;
  box-shadow:0 4px 0 #dfe4d5;
}

#customer .cw-actions .cw-action>svg{
  box-sizing:border-box;
  width:68px;
  height:68px;
  flex:0 0 68px;
  padding:15px;
  border:1px solid #a9b99e;
  border-radius:50%;
  background:#e8eee0;
  color:var(--green);
  box-shadow:inset 0 0 0 4px #ffffff99,0 3px 0 #dfe4d5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#customer .cw-actions [data-cw-catalog="retail"]>svg{
  background:#fbefb4;
  border-color:#d3bb67;
}

#customer .cw-actions [data-cw-catalog="food"]>svg{
  background:#e1eded;
  border-color:#a8c4c3;
}

#customer .cw-actions .cw-action[aria-pressed="true"]>svg{
  box-shadow:inset 0 0 0 4px #ffffff99,0 3px 0 #173c2a;
}

@media(min-width:761px) and (max-width:1100px){
  #customer .cw-actions .cw-action>svg{
    width:56px;
    height:56px;
    flex-basis:56px;
    padding:12px;
  }
}

@media(max-width:760px){
  #customer .cw-actions .cw-action{
    gap:15px;
    min-height:104px;
  }
  #customer .cw-actions .cw-action>svg{
    width:60px;
    height:60px;
    flex-basis:60px;
    padding:13px;
  }
}

@media(forced-colors:active){
  #customer .cw-actions .cw-action>svg{
    color:ButtonText;
    background:ButtonFace;
    border-color:ButtonText;
    box-shadow:none;
  }
}