/*
Swatch Button default format
Grid button size based on font-size as set on .cmsFormData
*/

/*old default
.cmsOptionButtonSet{
	display: grid;
	grid-gap: 0.25rem;
	grid-template-columns: repeat(auto-fill, minmax(5em, 1fr));
}

.cmsOptionButtonSet button{
	min-height:3em;
  padding: 0.25em;
	border-radius: 2px;
  border:1px solid #999;
  cursor:pointer;
  transition:background 0.3s ease;
}
.cmsOptionButtonSet button:hover{
  background:#e7e7e7;
}
.cmsOptionButtonSet button.optionSelected{
	background: #d6d6d6;
  border:1px solid black;
}
*/

.cmsOptionButtonSet button{
	   background:white;
    border:1px solid #ccc;
    cursor:pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    border-radius:4px;
    font-size:11px;
    line-height:1.1
}

.cmsOptionButtonSet button:has(img){
  justify-content:flex-start; /*valign top when swatch, center when text-only*/
}

.cmsOptionButtonSet .buttonLabel{
    padding-top:0.25rem;
}


.cmsOptionButtonSet button:hover{
	background:#efefef;
  border:1px solid #999;
}

.cmsOptionButtonSet button.optionSelected{
    background:#d6d6d6;
    border:1px solid black;
}
.cmsOptionButtonSet button[disabled]{
	opacity: 0.7;
}

/*AJ - cater for new display option that does not have .cmsFormElementb_size with :not :empty
to maintain uniform square display format across size options
text only no image swatch in set*/
.cmsFormElementb_size .cmsOptionButtonSet button:not(:has(img)),
.cmsOptionButtonSet:not(:has(img)) button:has(.cmsChildSize:not(:empty)){
    aspect-ratio:1;
    flex:1;
}

.cmsOptionButtonSet{
    display:grid;
    grid-gap:0.25rem;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.cmsFormElementb_colour .cmsOptionButtonSet button{
       padding:0.25rem;
}

.cmsFormElementb_size .cmsOptionButtonSet button{
       justify-content: center;
       font-size:13px;
}


.cmsFormElementb_size .cmsOptionButtonSet:not(:has(img)),
.cmsOptionButtonSet:has(.cmsChildSize:not(:empty)):not(:has(img)) {
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}