.paint-colour-match-modal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:calc(var(--z-header) + 1);display:flex;align-items:center;justify-content:center;padding:var(--spacing-6) var(--page-gutter);visibility:hidden;opacity:0;pointer-events:none;transition:visibility var(--duration-default),opacity var(--duration-default);background:#00000080!important}.paint-colour-match-modal[open]{visibility:visible;opacity:1;pointer-events:all}.paint-colour-match-modal[open]:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background-color:#00000080}.paint-colour-match-modal__dialog{position:relative;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;background-color:rgb(var(--color-background));border-radius:var(--card-corner-radius, .6rem);padding:2.4rem;z-index:1;transform:translateY(20px);transition:transform var(--duration-default)}.paint-colour-match-modal[open] .paint-colour-match-modal__dialog{transform:translateY(0)}.paint-colour-match-modal__close{position:absolute;top:1.2rem;right:1.2rem;z-index:2}.paint-colour-match-step.hidden{display:none}.paint-colour-match-step__title{margin-bottom:1.2rem}.paint-colour-match-step__body{margin-bottom:1.6rem}.paint-colour-match-step__field{margin-bottom:2rem}.paint-colour-match-step__actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}.paint-colour-match-step__actions--split{flex-direction:row;justify-content:space-between;gap:1rem}.paint-colour-match-step__actions--split .button{flex:1}.paint-colour-match-option{display:block;cursor:pointer;margin-bottom:1rem}.paint-colour-match-option input[type=radio]{position:absolute;opacity:0;width:0;height:0}.paint-colour-match-option__card{display:block;padding:1.6rem;border:.1rem solid rgba(var(--color-border),var(--alpha-border));border-radius:var(--card-corner-radius, .6rem);transition:border-color var(--duration-default),background-color var(--duration-default)}.paint-colour-match-option input[type=radio]:checked+.paint-colour-match-option__card{border-color:rgb(var(--color-foreground));background-color:rgba(var(--color-foreground),.04)}.paint-colour-match-option__name{font-weight:500}.paint-colour-match-summary{margin-bottom:2rem;border-top:.1rem solid rgba(var(--color-border),var(--alpha-border));border-bottom:.1rem solid rgba(var(--color-border),var(--alpha-border));padding:1.2rem 0}.paint-colour-match-summary__row{display:flex;justify-content:space-between;padding:.4rem 0}.paint-colour-match-summary__label{color:rgba(var(--color-foreground),.7)}.paint-colour-match-summary__value{font-weight:500}.paint-colour-match-price,.paint-colour-match-quantity{margin-bottom:1.6rem}.paint-colour-match-quantity .quantity__input{height:5.6rem!important}.paint-colour-match-coverage{margin-bottom:2rem}.paint-colour-match-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;font-size:calc(var(--typeBaseSize) + 2px);font-weight:600}.paint-colour-match-error{color:rgb(var(--color-error));margin-top:1rem;text-align:center}.paint-colour-match-error.hidden{display:none}button.paint-colour-match-modal__close{position:absolute;top:1.2rem;right:1.2rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:4rem;height:4rem;padding:0;margin:0;border:none;border-radius:50%;background-color:transparent;color:rgb(var(--color-foreground));cursor:pointer;-webkit-appearance:none;appearance:none}button.paint-colour-match-modal__close svg{width:2rem;height:2rem}button.paint-colour-match-modal__close:focus-visible{outline:.2rem solid rgb(var(--color-foreground));outline-offset:.2rem}button.button{display:inline-block;text-align:center;border:.1rem solid var(--color-button-outline);border-radius:var(--button-border-radius);padding:1.6rem 2.4rem;cursor:pointer;font-family:var(--font-button-family);font-size:calc(var(--font-button-scale) * 1rem);line-height:calc(1 + 0 / var(--font-button-scale));font-weight:var(--font-button-weight);letter-spacing:var(--font-button-letter-spacing);text-transform:var(--button-text-transform);color:var(--color-button-text);text-decoration:none;background-color:var(--color-button-background);position:relative;-webkit-appearance:none;appearance:none;transition:color var(--duration-long),background-color var(--duration-long),border-color var(--duration-long),opacity var(--duration-default);margin:0}button.button--filled{--color-button-text: rgb(var(--color-filled-button-text));--color-button-background: rgb(var(--color-filled-button));--color-button-outline: rgb(var(--color-filled-button));--color-button-hover-text: rgb(var(--color-filled-button));--color-button-hover-background: transparent;--color-button-hover-outline: rgb(var(--color-filled-button))}button.button--outlined{--color-button-text: rgb(var(--color-outlined-button-text));--color-button-background: transparent;--color-button-outline: rgb(var(--color-outlined-button-text));--color-button-hover-text: rgb(var(--color-outlined-button));--color-button-hover-background: rgb(var(--color-outlined-button-text));--color-button-hover-outline: rgb(var(--color-outlined-button-text))}button.button--inverse{--color-button-text: rgb(var(--color-filled-button));--color-button-background: rgb(var(--color-filled-button-text));--color-button-outline: rgb(var(--color-filled-button-text));--color-button-hover-text: rgb(var(--color-filled-button-text));--color-button-hover-background: rgb(var(--color-filled-button));--color-button-hover-outline: rgb(var(--color-filled-button-text))}button.button--full{display:block;width:100%}button.button--uppercase{text-transform:uppercase}button.button:disabled,button.button.disabled,button.button[disabled]{--color-button-text: rgb(255, 255, 255);--color-button-background: rgb(224, 224, 224);--color-button-outline: rgb(224, 224, 224);pointer-events:none}button.button .button__spinner{position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:100%;background-color:var(--color-popup-overlay);opacity:0;visibility:hidden;transition:opacity var(--duration-default),visibility var(--duration-default);border-radius:var(--button-border-radius)}button.button:disabled .button__spinner,button.button.disabled .button__spinner,button.button[disabled] .button__spinner{opacity:1;visibility:visible}@media(hover:hover){button.button:hover{color:var(--color-button-hover-text);background-color:var(--color-button-hover-background);border-color:var(--color-button-hover-outline)}}
/*# sourceMappingURL=/cdn/shop/t/168/assets/paint-colour-match.css.map */