.colorpick { position: relative; width: 100%; margin-bottom: 10px; } .colorpick__wrapper { position: relative; } .colorpick__current { display: flex; align-items: center; width: 100%; background: #fff; border: 1px solid #e5e5e5; cursor: pointer; text-align: left; font: inherit; font-weight: 400; text-transform: none; color: inherit; } .colorpick__current:hover { border-color: #d5d5d5; background-color: inherit; color: inherit; } .colorpick__current:focus { outline: none; border-color: #b5b5b5; } .colorpick__color { border-radius: 50%; margin-right: 8px; flex-shrink: 0; } .colorpick__unavailable { position: relative; opacity: 0.7; } .colorpick__label { flex-grow: 1; } .colorpick__label.has-stock-msg { display: flex; flex-wrap: wrap; align-items: center; } .colorpick__dropdown { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; margin-top: 4px; padding: 8px; background: #fff; border: 1px solid #e5e5e5; border-radius: 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); max-height: 300px; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-5px) scale(0.98); transform-origin: top center; transition: opacity 0.15s ease, transform 0.15s ease; will-change: transform, opacity; list-style: none; margin: 0; padding: 0; } .colorpick__current[aria-expanded="true"]+.colorpick__dropdown { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); min-height: fit-content; } @-moz-document url-prefix() { .colorpick__current[aria-expanded="true"]+.colorpick__dropdown { min-height: 150px !important; } } .colorpick__option { display: flex; align-items: center; padding: 15px; cursor: pointer; margin-bottom: 0; } .colorpick__option:last-child { margin-bottom: 0; } .colorpick__option:hover { background-color: #f5f5f5; } .colorpick__option.colorpick__option--selected { background-color: #f0f0f0; } .colorpick__option.is-unavailable { cursor: not-allowed; opacity: 0.7; } .colorpick__option.is-unavailable:hover { background-color: #fff; } @media screen and (min-width: 1024px) { body .reset_variations { position: relative !important; top: -22px !important; } } @media screen and (max-width: 1024px) { body .reset_variations { position: relative !important; top: -3px !important; } } .attribute-pa_color .with-swatches select { opacity: 0; height: 0; position: absolute; visibility: hidden; }