.btn { border-radius: var(--pk-border-radius-m); border-width: 1px; width: 100%; } @media (width>=768px) { .btn { width: auto; } } .btn-icon-border { font-size: var(--pk-font-size-m); width: calc(var(--pk-font-size-m) + 20); height: calc(var(--pk-font-size-m) + 20); vertical-align: middle; border-radius: 50%; padding: 10px; display: inline-block; } .btn-link .btn-icon-border { border: 1px solid var(--pk-interaction--light); } .btn-link:hover .btn-icon-border, .btn-link:focus .btn-icon-border, .btn-link.focus .btn-icon-border, .btn-link:active .btn-icon-border, .btn-link.active .btn-icon-border { border: 1px solid color-mix(in srgb, white 20%, var(--pk-interaction--light)); } .btn-primary, .btn-primary--light, .btn-primary.t-light, .btn-primary.btn--light { font-family: var(--pk-font-base-semibold); color: var(--pk-interaction-compl--light); background-color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); text-transform: none; transition-property: color, border-color, background-color; transition-duration: 0.3s; } .btn-primary pk-icon, .btn-primary--light pk-icon, .btn-primary.t-light pk-icon, .btn-primary.btn--light pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-primary:focus, .btn-primary.focus, .btn-primary--light:focus, .btn-primary--light.focus, .btn-primary.t-light:focus, .btn-primary.t-light.focus, .btn-primary.btn--light:focus, .btn-primary.btn--light.focus { color: var(--pk-interaction-compl--light); background-color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); outline: none; } .btn-primary:hover, .btn-primary--light:hover, .btn-primary.t-light:hover, .btn-primary.btn--light:hover { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, white 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--light)); } .btn-primary:hover pk-icon, .btn-primary--light:hover pk-icon, .btn-primary.t-light:hover pk-icon, .btn-primary.btn--light:hover pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-primary:active, .btn-primary.active, .btn-primary--light:active, .btn-primary--light.active, .btn-primary.t-light:active, .btn-primary.t-light.active, .btn-primary.btn--light:active, .btn-primary.btn--light.active { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); } .btn-primary:active pk-icon, .btn-primary.active pk-icon, .btn-primary--light:active pk-icon, .btn-primary--light.active pk-icon, .btn-primary.t-light:active pk-icon, .btn-primary.t-light.active pk-icon, .btn-primary.btn--light:active pk-icon, .btn-primary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary--light:active:hover, .btn-primary--light:active:focus, .btn-primary--light:active.focus, .btn-primary--light.active:hover, .btn-primary--light.active:focus, .btn-primary--light.active.focus, .btn-primary.t-light:active:hover, .btn-primary.t-light:active:focus, .btn-primary.t-light:active.focus, .btn-primary.t-light.active:hover, .btn-primary.t-light.active:focus, .btn-primary.t-light.active.focus, .btn-primary.btn--light:active:hover, .btn-primary.btn--light:active:focus, .btn-primary.btn--light:active.focus, .btn-primary.btn--light.active:hover, .btn-primary.btn--light.active:focus, .btn-primary.btn--light.active.focus { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); outline: none; } .btn-primary:active:hover pk-icon, .btn-primary:active:focus pk-icon, .btn-primary:active.focus pk-icon, .btn-primary.active:hover pk-icon, .btn-primary.active:focus pk-icon, .btn-primary.active.focus pk-icon, .btn-primary--light:active:hover pk-icon, .btn-primary--light:active:focus pk-icon, .btn-primary--light:active.focus pk-icon, .btn-primary--light.active:hover pk-icon, .btn-primary--light.active:focus pk-icon, .btn-primary--light.active.focus pk-icon, .btn-primary.t-light:active:hover pk-icon, .btn-primary.t-light:active:focus pk-icon, .btn-primary.t-light:active.focus pk-icon, .btn-primary.t-light.active:hover pk-icon, .btn-primary.t-light.active:focus pk-icon, .btn-primary.t-light.active.focus pk-icon, .btn-primary.btn--light:active:hover pk-icon, .btn-primary.btn--light:active:focus pk-icon, .btn-primary.btn--light:active.focus pk-icon, .btn-primary.btn--light.active:hover pk-icon, .btn-primary.btn--light.active:focus pk-icon, .btn-primary.btn--light.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } @media (hover: none) { .btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary--light:hover, .btn-primary--light:active, .btn-primary--light:focus, .btn-primary.t-light:hover, .btn-primary.t-light:active, .btn-primary.t-light:focus, .btn-primary.btn--light:hover, .btn-primary.btn--light:active, .btn-primary.btn--light:focus { color: var(--pk-interaction-compl--light); background-color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); outline: none; } .btn-primary:hover pk-icon, .btn-primary:active pk-icon, .btn-primary:focus pk-icon, .btn-primary--light:hover pk-icon, .btn-primary--light:active pk-icon, .btn-primary--light:focus pk-icon, .btn-primary.t-light:hover pk-icon, .btn-primary.t-light:active pk-icon, .btn-primary.t-light:focus pk-icon, .btn-primary.btn--light:hover pk-icon, .btn-primary.btn--light:active pk-icon, .btn-primary.btn--light:focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } } .btn-primary.disabled, .btn-primary[disabled], fieldset[disabled] .btn-primary, .btn-primary--light.disabled, .btn-primary--light[disabled], fieldset[disabled] .btn-primary--light, .btn-primary.t-light.disabled, .btn-primary.t-light[disabled], fieldset[disabled] .btn-primary.t-light, .btn-primary.btn--light.disabled, .btn-primary.btn--light[disabled], fieldset[disabled] .btn-primary.btn--light { opacity: 0.4; cursor: default; pointer-events: none; } .btn-primary.disabled:before, .btn-primary.disabled:after, .btn-primary[disabled]:before, .btn-primary[disabled]:after, fieldset[disabled] .btn-primary:before, fieldset[disabled] .btn-primary:after, .btn-primary--light.disabled:before, .btn-primary--light.disabled:after, .btn-primary--light[disabled]:before, .btn-primary--light[disabled]:after, fieldset[disabled] .btn-primary--light:before, fieldset[disabled] .btn-primary--light:after, .btn-primary.t-light.disabled:before, .btn-primary.t-light.disabled:after, .btn-primary.t-light[disabled]:before, .btn-primary.t-light[disabled]:after, fieldset[disabled] .btn-primary.t-light:before, fieldset[disabled] .btn-primary.t-light:after, .btn-primary.btn--light.disabled:before, .btn-primary.btn--light.disabled:after, .btn-primary.btn--light[disabled]:before, .btn-primary.btn--light[disabled]:after, fieldset[disabled] .btn-primary.btn--light:before, fieldset[disabled] .btn-primary.btn--light:after { opacity: 0.2; } .btn-primary.disabled, .btn-primary.disabled:hover, .btn-primary.disabled:focus, .btn-primary.disabled.focus, .btn-primary.disabled:active, .btn-primary.disabled.active, .btn-primary[disabled], .btn-primary[disabled]:hover, .btn-primary[disabled]:focus, .btn-primary[disabled].focus, .btn-primary[disabled]:active, .btn-primary[disabled].active, fieldset[disabled] .btn-primary, fieldset[disabled] .btn-primary:hover, fieldset[disabled] .btn-primary:focus, fieldset[disabled] .btn-primary.focus, fieldset[disabled] .btn-primary:active, fieldset[disabled] .btn-primary.active, .btn-primary--light.disabled, .btn-primary--light.disabled:hover, .btn-primary--light.disabled:focus, .btn-primary--light.disabled.focus, .btn-primary--light.disabled:active, .btn-primary--light.disabled.active, .btn-primary--light[disabled], .btn-primary--light[disabled]:hover, .btn-primary--light[disabled]:focus, .btn-primary--light[disabled].focus, .btn-primary--light[disabled]:active, .btn-primary--light[disabled].active, fieldset[disabled] .btn-primary--light, fieldset[disabled] .btn-primary--light:hover, fieldset[disabled] .btn-primary--light:focus, fieldset[disabled] .btn-primary--light.focus, fieldset[disabled] .btn-primary--light:active, fieldset[disabled] .btn-primary--light.active, .btn-primary.t-light.disabled, .btn-primary.t-light.disabled:hover, .btn-primary.t-light.disabled:focus, .btn-primary.t-light.disabled.focus, .btn-primary.t-light.disabled:active, .btn-primary.t-light.disabled.active, .btn-primary.t-light[disabled], .btn-primary.t-light[disabled]:hover, .btn-primary.t-light[disabled]:focus, .btn-primary.t-light[disabled].focus, .btn-primary.t-light[disabled]:active, .btn-primary.t-light[disabled].active, fieldset[disabled] .btn-primary.t-light, fieldset[disabled] .btn-primary.t-light:hover, fieldset[disabled] .btn-primary.t-light:focus, fieldset[disabled] .btn-primary.t-light.focus, fieldset[disabled] .btn-primary.t-light:active, fieldset[disabled] .btn-primary.t-light.active, .btn-primary.btn--light.disabled, .btn-primary.btn--light.disabled:hover, .btn-primary.btn--light.disabled:focus, .btn-primary.btn--light.disabled.focus, .btn-primary.btn--light.disabled:active, .btn-primary.btn--light.disabled.active, .btn-primary.btn--light[disabled], .btn-primary.btn--light[disabled]:hover, .btn-primary.btn--light[disabled]:focus, .btn-primary.btn--light[disabled].focus, .btn-primary.btn--light[disabled]:active, .btn-primary.btn--light[disabled].active, fieldset[disabled] .btn-primary.btn--light, fieldset[disabled] .btn-primary.btn--light:hover, fieldset[disabled] .btn-primary.btn--light:focus, fieldset[disabled] .btn-primary.btn--light.focus, fieldset[disabled] .btn-primary.btn--light:active, fieldset[disabled] .btn-primary.btn--light.active { color: var(--pk-interaction-compl--light); background-color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); } .btn-primary.disabled pk-icon, .btn-primary.disabled:hover pk-icon, .btn-primary.disabled:focus pk-icon, .btn-primary.disabled.focus pk-icon, .btn-primary.disabled:active pk-icon, .btn-primary.disabled.active pk-icon, .btn-primary[disabled] pk-icon, .btn-primary[disabled]:hover pk-icon, .btn-primary[disabled]:focus pk-icon, .btn-primary[disabled].focus pk-icon, .btn-primary[disabled]:active pk-icon, .btn-primary[disabled].active pk-icon, fieldset[disabled] .btn-primary pk-icon, fieldset[disabled] .btn-primary:hover pk-icon, fieldset[disabled] .btn-primary:focus pk-icon, fieldset[disabled] .btn-primary.focus pk-icon, fieldset[disabled] .btn-primary:active pk-icon, fieldset[disabled] .btn-primary.active pk-icon, .btn-primary--light.disabled pk-icon, .btn-primary--light.disabled:hover pk-icon, .btn-primary--light.disabled:focus pk-icon, .btn-primary--light.disabled.focus pk-icon, .btn-primary--light.disabled:active pk-icon, .btn-primary--light.disabled.active pk-icon, .btn-primary--light[disabled] pk-icon, .btn-primary--light[disabled]:hover pk-icon, .btn-primary--light[disabled]:focus pk-icon, .btn-primary--light[disabled].focus pk-icon, .btn-primary--light[disabled]:active pk-icon, .btn-primary--light[disabled].active pk-icon, fieldset[disabled] .btn-primary--light pk-icon, fieldset[disabled] .btn-primary--light:hover pk-icon, fieldset[disabled] .btn-primary--light:focus pk-icon, fieldset[disabled] .btn-primary--light.focus pk-icon, fieldset[disabled] .btn-primary--light:active pk-icon, fieldset[disabled] .btn-primary--light.active pk-icon, .btn-primary.t-light.disabled pk-icon, .btn-primary.t-light.disabled:hover pk-icon, .btn-primary.t-light.disabled:focus pk-icon, .btn-primary.t-light.disabled.focus pk-icon, .btn-primary.t-light.disabled:active pk-icon, .btn-primary.t-light.disabled.active pk-icon, .btn-primary.t-light[disabled] pk-icon, .btn-primary.t-light[disabled]:hover pk-icon, .btn-primary.t-light[disabled]:focus pk-icon, .btn-primary.t-light[disabled].focus pk-icon, .btn-primary.t-light[disabled]:active pk-icon, .btn-primary.t-light[disabled].active pk-icon, fieldset[disabled] .btn-primary.t-light pk-icon, fieldset[disabled] .btn-primary.t-light:hover pk-icon, fieldset[disabled] .btn-primary.t-light:focus pk-icon, fieldset[disabled] .btn-primary.t-light.focus pk-icon, fieldset[disabled] .btn-primary.t-light:active pk-icon, fieldset[disabled] .btn-primary.t-light.active pk-icon, .btn-primary.btn--light.disabled pk-icon, .btn-primary.btn--light.disabled:hover pk-icon, .btn-primary.btn--light.disabled:focus pk-icon, .btn-primary.btn--light.disabled.focus pk-icon, .btn-primary.btn--light.disabled:active pk-icon, .btn-primary.btn--light.disabled.active pk-icon, .btn-primary.btn--light[disabled] pk-icon, .btn-primary.btn--light[disabled]:hover pk-icon, .btn-primary.btn--light[disabled]:focus pk-icon, .btn-primary.btn--light[disabled].focus pk-icon, .btn-primary.btn--light[disabled]:active pk-icon, .btn-primary.btn--light[disabled].active pk-icon, fieldset[disabled] .btn-primary.btn--light pk-icon, fieldset[disabled] .btn-primary.btn--light:hover pk-icon, fieldset[disabled] .btn-primary.btn--light:focus pk-icon, fieldset[disabled] .btn-primary.btn--light.focus pk-icon, fieldset[disabled] .btn-primary.btn--light:active pk-icon, fieldset[disabled] .btn-primary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-primary .btn-icon-border, .btn-primary--light .btn-icon-border, .btn-primary.t-light .btn-icon-border, .btn-primary.btn--light .btn-icon-border { border: 1px solid var(--pk-interaction-compl--light); } .btn-primary:hover, .btn-primary:focus, .btn-primary.focus, .btn-primary:active, .btn-primary.active, .btn-primary--light:hover, .btn-primary--light:focus, .btn-primary--light.focus, .btn-primary--light:active, .btn-primary--light.active, .btn-primary.t-light:hover, .btn-primary.t-light:focus, .btn-primary.t-light.focus, .btn-primary.t-light:active, .btn-primary.t-light.active, .btn-primary.btn--light:hover, .btn-primary.btn--light:focus, .btn-primary.btn--light.focus, .btn-primary.btn--light:active, .btn-primary.btn--light.active { box-shadow: none; outline: none; } .btn-primary:hover .btn-icon-border, .btn-primary:focus .btn-icon-border, .btn-primary.focus .btn-icon-border, .btn-primary:active .btn-icon-border, .btn-primary.active .btn-icon-border, .btn-primary--light:hover .btn-icon-border, .btn-primary--light:focus .btn-icon-border, .btn-primary--light.focus .btn-icon-border, .btn-primary--light:active .btn-icon-border, .btn-primary--light.active .btn-icon-border, .btn-primary.t-light:hover .btn-icon-border, .btn-primary.t-light:focus .btn-icon-border, .btn-primary.t-light.focus .btn-icon-border, .btn-primary.t-light:active .btn-icon-border, .btn-primary.t-light.active .btn-icon-border, .btn-primary.btn--light:hover .btn-icon-border, .btn-primary.btn--light:focus .btn-icon-border, .btn-primary.btn--light.focus .btn-icon-border, .btn-primary.btn--light:active .btn-icon-border, .btn-primary.btn--light.active .btn-icon-border { border-color: var(--pk-interaction-compl--light); } .btn-primary:focus, .btn-primary:active:focus, .btn-primary--light:focus, .btn-primary--light:active:focus, .btn-primary.t-light:focus, .btn-primary.t-light:active:focus, .btn-primary.btn--light:focus, .btn-primary.btn--light:active:focus { box-shadow: none; outline: none; } @media (hover: none) and (pointer: coarse) { .btn-primary:active, .btn-primary.active, .btn-primary--light:active, .btn-primary--light.active, .btn-primary.t-light:active, .btn-primary.t-light.active, .btn-primary.btn--light:active, .btn-primary.btn--light.active { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--light)); transition-duration: 0.1s; } .btn-primary:active pk-icon, .btn-primary.active pk-icon, .btn-primary--light:active pk-icon, .btn-primary--light.active pk-icon, .btn-primary.t-light:active pk-icon, .btn-primary.t-light.active pk-icon, .btn-primary.btn--light:active pk-icon, .btn-primary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-primary:active:hover, .btn-primary:active:focus, .btn-primary:active.focus, .btn-primary.active:hover, .btn-primary.active:focus, .btn-primary.active.focus, .btn-primary--light:active:hover, .btn-primary--light:active:focus, .btn-primary--light:active.focus, .btn-primary--light.active:hover, .btn-primary--light.active:focus, .btn-primary--light.active.focus, .btn-primary.t-light:active:hover, .btn-primary.t-light:active:focus, .btn-primary.t-light:active.focus, .btn-primary.t-light.active:hover, .btn-primary.t-light.active:focus, .btn-primary.t-light.active.focus, .btn-primary.btn--light:active:hover, .btn-primary.btn--light:active:focus, .btn-primary.btn--light:active.focus, .btn-primary.btn--light.active:hover, .btn-primary.btn--light.active:focus, .btn-primary.btn--light.active.focus { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--light)); outline: none; transition-duration: 0.1s; } .btn-primary:active:hover pk-icon, .btn-primary:active:focus pk-icon, .btn-primary:active.focus pk-icon, .btn-primary.active:hover pk-icon, .btn-primary.active:focus pk-icon, .btn-primary.active.focus pk-icon, .btn-primary--light:active:hover pk-icon, .btn-primary--light:active:focus pk-icon, .btn-primary--light:active.focus pk-icon, .btn-primary--light.active:hover pk-icon, .btn-primary--light.active:focus pk-icon, .btn-primary--light.active.focus pk-icon, .btn-primary.t-light:active:hover pk-icon, .btn-primary.t-light:active:focus pk-icon, .btn-primary.t-light:active.focus pk-icon, .btn-primary.t-light.active:hover pk-icon, .btn-primary.t-light.active:focus pk-icon, .btn-primary.t-light.active.focus pk-icon, .btn-primary.btn--light:active:hover pk-icon, .btn-primary.btn--light:active:focus pk-icon, .btn-primary.btn--light:active.focus pk-icon, .btn-primary.btn--light.active:hover pk-icon, .btn-primary.btn--light.active:focus pk-icon, .btn-primary.btn--light.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } } .btn-primary--dark, .btn-primary.t-dark, .btn-primary.btn--dark { font-family: var(--pk-font-base-semibold); color: var(--pk-interaction-compl--dark); background-color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); text-transform: none; transition-property: color, border-color, background-color; transition-duration: 0.3s; } .btn-primary--dark pk-icon, .btn-primary.t-dark pk-icon, .btn-primary.btn--dark pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-primary--dark:focus, .btn-primary--dark.focus, .btn-primary.t-dark:focus, .btn-primary.t-dark.focus, .btn-primary.btn--dark:focus, .btn-primary.btn--dark.focus { color: var(--pk-interaction-compl--dark); background-color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); outline: none; } .btn-primary--dark:hover, .btn-primary.t-dark:hover, .btn-primary.btn--dark:hover { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, white 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--dark)); } .btn-primary--dark:hover pk-icon, .btn-primary.t-dark:hover pk-icon, .btn-primary.btn--dark:hover pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-primary--dark:active, .btn-primary--dark.active, .btn-primary.t-dark:active, .btn-primary.t-dark.active, .btn-primary.btn--dark:active, .btn-primary.btn--dark.active { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); } .btn-primary--dark:active pk-icon, .btn-primary--dark.active pk-icon, .btn-primary.t-dark:active pk-icon, .btn-primary.t-dark.active pk-icon, .btn-primary.btn--dark:active pk-icon, .btn-primary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-primary--dark:active:hover, .btn-primary--dark:active:focus, .btn-primary--dark:active.focus, .btn-primary--dark.active:hover, .btn-primary--dark.active:focus, .btn-primary--dark.active.focus, .btn-primary.t-dark:active:hover, .btn-primary.t-dark:active:focus, .btn-primary.t-dark:active.focus, .btn-primary.t-dark.active:hover, .btn-primary.t-dark.active:focus, .btn-primary.t-dark.active.focus, .btn-primary.btn--dark:active:hover, .btn-primary.btn--dark:active:focus, .btn-primary.btn--dark:active.focus, .btn-primary.btn--dark.active:hover, .btn-primary.btn--dark.active:focus, .btn-primary.btn--dark.active.focus { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); outline: none; } .btn-primary--dark:active:hover pk-icon, .btn-primary--dark:active:focus pk-icon, .btn-primary--dark:active.focus pk-icon, .btn-primary--dark.active:hover pk-icon, .btn-primary--dark.active:focus pk-icon, .btn-primary--dark.active.focus pk-icon, .btn-primary.t-dark:active:hover pk-icon, .btn-primary.t-dark:active:focus pk-icon, .btn-primary.t-dark:active.focus pk-icon, .btn-primary.t-dark.active:hover pk-icon, .btn-primary.t-dark.active:focus pk-icon, .btn-primary.t-dark.active.focus pk-icon, .btn-primary.btn--dark:active:hover pk-icon, .btn-primary.btn--dark:active:focus pk-icon, .btn-primary.btn--dark:active.focus pk-icon, .btn-primary.btn--dark.active:hover pk-icon, .btn-primary.btn--dark.active:focus pk-icon, .btn-primary.btn--dark.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } @media (hover: none) { .btn-primary--dark:hover, .btn-primary--dark:active, .btn-primary--dark:focus, .btn-primary.t-dark:hover, .btn-primary.t-dark:active, .btn-primary.t-dark:focus, .btn-primary.btn--dark:hover, .btn-primary.btn--dark:active, .btn-primary.btn--dark:focus { color: var(--pk-interaction-compl--dark); background-color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); outline: none; } .btn-primary--dark:hover pk-icon, .btn-primary--dark:active pk-icon, .btn-primary--dark:focus pk-icon, .btn-primary.t-dark:hover pk-icon, .btn-primary.t-dark:active pk-icon, .btn-primary.t-dark:focus pk-icon, .btn-primary.btn--dark:hover pk-icon, .btn-primary.btn--dark:active pk-icon, .btn-primary.btn--dark:focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } } .btn-primary--dark.disabled, .btn-primary--dark[disabled], fieldset[disabled] .btn-primary--dark, .btn-primary.t-dark.disabled, .btn-primary.t-dark[disabled], fieldset[disabled] .btn-primary.t-dark, .btn-primary.btn--dark.disabled, .btn-primary.btn--dark[disabled], fieldset[disabled] .btn-primary.btn--dark { opacity: 0.4; cursor: default; pointer-events: none; } .btn-primary--dark.disabled:before, .btn-primary--dark.disabled:after, .btn-primary--dark[disabled]:before, .btn-primary--dark[disabled]:after, fieldset[disabled] .btn-primary--dark:before, fieldset[disabled] .btn-primary--dark:after, .btn-primary.t-dark.disabled:before, .btn-primary.t-dark.disabled:after, .btn-primary.t-dark[disabled]:before, .btn-primary.t-dark[disabled]:after, fieldset[disabled] .btn-primary.t-dark:before, fieldset[disabled] .btn-primary.t-dark:after, .btn-primary.btn--dark.disabled:before, .btn-primary.btn--dark.disabled:after, .btn-primary.btn--dark[disabled]:before, .btn-primary.btn--dark[disabled]:after, fieldset[disabled] .btn-primary.btn--dark:before, fieldset[disabled] .btn-primary.btn--dark:after { opacity: 0.2; } .btn-primary--dark.disabled, .btn-primary--dark.disabled:hover, .btn-primary--dark.disabled:focus, .btn-primary--dark.disabled.focus, .btn-primary--dark.disabled:active, .btn-primary--dark.disabled.active, .btn-primary--dark[disabled], .btn-primary--dark[disabled]:hover, .btn-primary--dark[disabled]:focus, .btn-primary--dark[disabled].focus, .btn-primary--dark[disabled]:active, .btn-primary--dark[disabled].active, fieldset[disabled] .btn-primary--dark, fieldset[disabled] .btn-primary--dark:hover, fieldset[disabled] .btn-primary--dark:focus, fieldset[disabled] .btn-primary--dark.focus, fieldset[disabled] .btn-primary--dark:active, fieldset[disabled] .btn-primary--dark.active, .btn-primary.t-dark.disabled, .btn-primary.t-dark.disabled:hover, .btn-primary.t-dark.disabled:focus, .btn-primary.t-dark.disabled.focus, .btn-primary.t-dark.disabled:active, .btn-primary.t-dark.disabled.active, .btn-primary.t-dark[disabled], .btn-primary.t-dark[disabled]:hover, .btn-primary.t-dark[disabled]:focus, .btn-primary.t-dark[disabled].focus, .btn-primary.t-dark[disabled]:active, .btn-primary.t-dark[disabled].active, fieldset[disabled] .btn-primary.t-dark, fieldset[disabled] .btn-primary.t-dark:hover, fieldset[disabled] .btn-primary.t-dark:focus, fieldset[disabled] .btn-primary.t-dark.focus, fieldset[disabled] .btn-primary.t-dark:active, fieldset[disabled] .btn-primary.t-dark.active, .btn-primary.btn--dark.disabled, .btn-primary.btn--dark.disabled:hover, .btn-primary.btn--dark.disabled:focus, .btn-primary.btn--dark.disabled.focus, .btn-primary.btn--dark.disabled:active, .btn-primary.btn--dark.disabled.active, .btn-primary.btn--dark[disabled], .btn-primary.btn--dark[disabled]:hover, .btn-primary.btn--dark[disabled]:focus, .btn-primary.btn--dark[disabled].focus, .btn-primary.btn--dark[disabled]:active, .btn-primary.btn--dark[disabled].active, fieldset[disabled] .btn-primary.btn--dark, fieldset[disabled] .btn-primary.btn--dark:hover, fieldset[disabled] .btn-primary.btn--dark:focus, fieldset[disabled] .btn-primary.btn--dark.focus, fieldset[disabled] .btn-primary.btn--dark:active, fieldset[disabled] .btn-primary.btn--dark.active { color: var(--pk-interaction-compl--dark); background-color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); } .btn-primary--dark.disabled pk-icon, .btn-primary--dark.disabled:hover pk-icon, .btn-primary--dark.disabled:focus pk-icon, .btn-primary--dark.disabled.focus pk-icon, .btn-primary--dark.disabled:active pk-icon, .btn-primary--dark.disabled.active pk-icon, .btn-primary--dark[disabled] pk-icon, .btn-primary--dark[disabled]:hover pk-icon, .btn-primary--dark[disabled]:focus pk-icon, .btn-primary--dark[disabled].focus pk-icon, .btn-primary--dark[disabled]:active pk-icon, .btn-primary--dark[disabled].active pk-icon, fieldset[disabled] .btn-primary--dark pk-icon, fieldset[disabled] .btn-primary--dark:hover pk-icon, fieldset[disabled] .btn-primary--dark:focus pk-icon, fieldset[disabled] .btn-primary--dark.focus pk-icon, fieldset[disabled] .btn-primary--dark:active pk-icon, fieldset[disabled] .btn-primary--dark.active pk-icon, .btn-primary.t-dark.disabled pk-icon, .btn-primary.t-dark.disabled:hover pk-icon, .btn-primary.t-dark.disabled:focus pk-icon, .btn-primary.t-dark.disabled.focus pk-icon, .btn-primary.t-dark.disabled:active pk-icon, .btn-primary.t-dark.disabled.active pk-icon, .btn-primary.t-dark[disabled] pk-icon, .btn-primary.t-dark[disabled]:hover pk-icon, .btn-primary.t-dark[disabled]:focus pk-icon, .btn-primary.t-dark[disabled].focus pk-icon, .btn-primary.t-dark[disabled]:active pk-icon, .btn-primary.t-dark[disabled].active pk-icon, fieldset[disabled] .btn-primary.t-dark pk-icon, fieldset[disabled] .btn-primary.t-dark:hover pk-icon, fieldset[disabled] .btn-primary.t-dark:focus pk-icon, fieldset[disabled] .btn-primary.t-dark.focus pk-icon, fieldset[disabled] .btn-primary.t-dark:active pk-icon, fieldset[disabled] .btn-primary.t-dark.active pk-icon, .btn-primary.btn--dark.disabled pk-icon, .btn-primary.btn--dark.disabled:hover pk-icon, .btn-primary.btn--dark.disabled:focus pk-icon, .btn-primary.btn--dark.disabled.focus pk-icon, .btn-primary.btn--dark.disabled:active pk-icon, .btn-primary.btn--dark.disabled.active pk-icon, .btn-primary.btn--dark[disabled] pk-icon, .btn-primary.btn--dark[disabled]:hover pk-icon, .btn-primary.btn--dark[disabled]:focus pk-icon, .btn-primary.btn--dark[disabled].focus pk-icon, .btn-primary.btn--dark[disabled]:active pk-icon, .btn-primary.btn--dark[disabled].active pk-icon, fieldset[disabled] .btn-primary.btn--dark pk-icon, fieldset[disabled] .btn-primary.btn--dark:hover pk-icon, fieldset[disabled] .btn-primary.btn--dark:focus pk-icon, fieldset[disabled] .btn-primary.btn--dark.focus pk-icon, fieldset[disabled] .btn-primary.btn--dark:active pk-icon, fieldset[disabled] .btn-primary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-primary--dark .btn-icon-border, .btn-primary.t-dark .btn-icon-border, .btn-primary.btn--dark .btn-icon-border { border: 1px solid var(--pk-interaction-compl--dark); } .btn-primary--dark:hover, .btn-primary--dark:focus, .btn-primary--dark.focus, .btn-primary--dark:active, .btn-primary--dark.active, .btn-primary.t-dark:hover, .btn-primary.t-dark:focus, .btn-primary.t-dark.focus, .btn-primary.t-dark:active, .btn-primary.t-dark.active, .btn-primary.btn--dark:hover, .btn-primary.btn--dark:focus, .btn-primary.btn--dark.focus, .btn-primary.btn--dark:active, .btn-primary.btn--dark.active { box-shadow: none; outline: none; } .btn-primary--dark:hover .btn-icon-border, .btn-primary--dark:focus .btn-icon-border, .btn-primary--dark.focus .btn-icon-border, .btn-primary--dark:active .btn-icon-border, .btn-primary--dark.active .btn-icon-border, .btn-primary.t-dark:hover .btn-icon-border, .btn-primary.t-dark:focus .btn-icon-border, .btn-primary.t-dark.focus .btn-icon-border, .btn-primary.t-dark:active .btn-icon-border, .btn-primary.t-dark.active .btn-icon-border, .btn-primary.btn--dark:hover .btn-icon-border, .btn-primary.btn--dark:focus .btn-icon-border, .btn-primary.btn--dark.focus .btn-icon-border, .btn-primary.btn--dark:active .btn-icon-border, .btn-primary.btn--dark.active .btn-icon-border { border-color: var(--pk-interaction-compl--dark); } .btn-primary--dark:focus, .btn-primary--dark:active:focus, .btn-primary.t-dark:focus, .btn-primary.t-dark:active:focus, .btn-primary.btn--dark:focus, .btn-primary.btn--dark:active:focus { box-shadow: none; outline: none; } @media (hover: none) and (pointer: coarse) { .btn-primary--dark:active, .btn-primary--dark.active, .btn-primary.t-dark:active, .btn-primary.t-dark.active, .btn-primary.btn--dark:active, .btn-primary.btn--dark.active { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--dark)); transition-duration: 0.1s; } .btn-primary--dark:active pk-icon, .btn-primary--dark.active pk-icon, .btn-primary.t-dark:active pk-icon, .btn-primary.t-dark.active pk-icon, .btn-primary.btn--dark:active pk-icon, .btn-primary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-primary--dark:active:hover, .btn-primary--dark:active:focus, .btn-primary--dark:active.focus, .btn-primary--dark.active:hover, .btn-primary--dark.active:focus, .btn-primary--dark.active.focus, .btn-primary.t-dark:active:hover, .btn-primary.t-dark:active:focus, .btn-primary.t-dark:active.focus, .btn-primary.t-dark.active:hover, .btn-primary.t-dark.active:focus, .btn-primary.t-dark.active.focus, .btn-primary.btn--dark:active:hover, .btn-primary.btn--dark:active:focus, .btn-primary.btn--dark:active.focus, .btn-primary.btn--dark.active:hover, .btn-primary.btn--dark.active:focus, .btn-primary.btn--dark.active.focus { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, white 20%, var(--pk-interaction--dark)); outline: none; transition-duration: 0.1s; } .btn-primary--dark:active:hover pk-icon, .btn-primary--dark:active:focus pk-icon, .btn-primary--dark:active.focus pk-icon, .btn-primary--dark.active:hover pk-icon, .btn-primary--dark.active:focus pk-icon, .btn-primary--dark.active.focus pk-icon, .btn-primary.t-dark:active:hover pk-icon, .btn-primary.t-dark:active:focus pk-icon, .btn-primary.t-dark:active.focus pk-icon, .btn-primary.t-dark.active:hover pk-icon, .btn-primary.t-dark.active:focus pk-icon, .btn-primary.t-dark.active.focus pk-icon, .btn-primary.btn--dark:active:hover pk-icon, .btn-primary.btn--dark:active:focus pk-icon, .btn-primary.btn--dark:active.focus pk-icon, .btn-primary.btn--dark.active:hover pk-icon, .btn-primary.btn--dark.active:focus pk-icon, .btn-primary.btn--dark.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } } .btn-secondary, .btn-secondary--light, .btn-secondary.t-light, .btn-secondary.btn--light { font-family: var(--pk-font-base-semibold); color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); text-transform: none; background-color: #0000; transition-property: color, border-color, background-color; transition-duration: 0.3s; } .btn-secondary pk-icon, .btn-secondary--light pk-icon, .btn-secondary.t-light pk-icon, .btn-secondary.btn--light pk-icon { --pk-icon--color: var(--pk-interaction--light); } .btn-secondary:focus, .btn-secondary.focus, .btn-secondary--light:focus, .btn-secondary--light.focus, .btn-secondary.t-light:focus, .btn-secondary.t-light.focus, .btn-secondary.btn--light:focus, .btn-secondary.btn--light.focus { color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); background-color: #0000; outline: none; } .btn-secondary:hover, .btn-secondary--light:hover, .btn-secondary.t-light:hover, .btn-secondary.btn--light:hover { color: var(--pk-interaction-compl--light); background-color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); } .btn-secondary:hover pk-icon, .btn-secondary--light:hover pk-icon, .btn-secondary.t-light:hover pk-icon, .btn-secondary.btn--light:hover pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-secondary:active, .btn-secondary.active, .btn-secondary--light:active, .btn-secondary--light.active, .btn-secondary.t-light:active, .btn-secondary.t-light.active, .btn-secondary.btn--light:active, .btn-secondary.btn--light.active { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); } .btn-secondary:active pk-icon, .btn-secondary.active pk-icon, .btn-secondary--light:active pk-icon, .btn-secondary--light.active pk-icon, .btn-secondary.t-light:active pk-icon, .btn-secondary.t-light.active pk-icon, .btn-secondary.btn--light:active pk-icon, .btn-secondary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus, .btn-secondary--light:active:hover, .btn-secondary--light:active:focus, .btn-secondary--light:active.focus, .btn-secondary--light.active:hover, .btn-secondary--light.active:focus, .btn-secondary--light.active.focus, .btn-secondary.t-light:active:hover, .btn-secondary.t-light:active:focus, .btn-secondary.t-light:active.focus, .btn-secondary.t-light.active:hover, .btn-secondary.t-light.active:focus, .btn-secondary.t-light.active.focus, .btn-secondary.btn--light:active:hover, .btn-secondary.btn--light:active:focus, .btn-secondary.btn--light:active.focus, .btn-secondary.btn--light.active:hover, .btn-secondary.btn--light.active:focus, .btn-secondary.btn--light.active.focus { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); outline: none; } .btn-secondary:active:hover pk-icon, .btn-secondary:active:focus pk-icon, .btn-secondary:active.focus pk-icon, .btn-secondary.active:hover pk-icon, .btn-secondary.active:focus pk-icon, .btn-secondary.active.focus pk-icon, .btn-secondary--light:active:hover pk-icon, .btn-secondary--light:active:focus pk-icon, .btn-secondary--light:active.focus pk-icon, .btn-secondary--light.active:hover pk-icon, .btn-secondary--light.active:focus pk-icon, .btn-secondary--light.active.focus pk-icon, .btn-secondary.t-light:active:hover pk-icon, .btn-secondary.t-light:active:focus pk-icon, .btn-secondary.t-light:active.focus pk-icon, .btn-secondary.t-light.active:hover pk-icon, .btn-secondary.t-light.active:focus pk-icon, .btn-secondary.t-light.active.focus pk-icon, .btn-secondary.btn--light:active:hover pk-icon, .btn-secondary.btn--light:active:focus pk-icon, .btn-secondary.btn--light:active.focus pk-icon, .btn-secondary.btn--light.active:hover pk-icon, .btn-secondary.btn--light.active:focus pk-icon, .btn-secondary.btn--light.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } @media (hover: none) { .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary--light:hover, .btn-secondary--light:active, .btn-secondary--light:focus, .btn-secondary.t-light:hover, .btn-secondary.t-light:active, .btn-secondary.t-light:focus, .btn-secondary.btn--light:hover, .btn-secondary.btn--light:active, .btn-secondary.btn--light:focus { color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); background-color: #0000; outline: none; } .btn-secondary:hover pk-icon, .btn-secondary:active pk-icon, .btn-secondary:focus pk-icon, .btn-secondary--light:hover pk-icon, .btn-secondary--light:active pk-icon, .btn-secondary--light:focus pk-icon, .btn-secondary.t-light:hover pk-icon, .btn-secondary.t-light:active pk-icon, .btn-secondary.t-light:focus pk-icon, .btn-secondary.btn--light:hover pk-icon, .btn-secondary.btn--light:active pk-icon, .btn-secondary.btn--light:focus pk-icon { --pk-icon--color: var(--pk-interaction--light); } } .btn-secondary.disabled, .btn-secondary[disabled], fieldset[disabled] .btn-secondary, .btn-secondary--light.disabled, .btn-secondary--light[disabled], fieldset[disabled] .btn-secondary--light, .btn-secondary.t-light.disabled, .btn-secondary.t-light[disabled], fieldset[disabled] .btn-secondary.t-light, .btn-secondary.btn--light.disabled, .btn-secondary.btn--light[disabled], fieldset[disabled] .btn-secondary.btn--light { opacity: 0.4; cursor: default; pointer-events: none; } .btn-secondary.disabled:before, .btn-secondary.disabled:after, .btn-secondary[disabled]:before, .btn-secondary[disabled]:after, fieldset[disabled] .btn-secondary:before, fieldset[disabled] .btn-secondary:after, .btn-secondary--light.disabled:before, .btn-secondary--light.disabled:after, .btn-secondary--light[disabled]:before, .btn-secondary--light[disabled]:after, fieldset[disabled] .btn-secondary--light:before, fieldset[disabled] .btn-secondary--light:after, .btn-secondary.t-light.disabled:before, .btn-secondary.t-light.disabled:after, .btn-secondary.t-light[disabled]:before, .btn-secondary.t-light[disabled]:after, fieldset[disabled] .btn-secondary.t-light:before, fieldset[disabled] .btn-secondary.t-light:after, .btn-secondary.btn--light.disabled:before, .btn-secondary.btn--light.disabled:after, .btn-secondary.btn--light[disabled]:before, .btn-secondary.btn--light[disabled]:after, fieldset[disabled] .btn-secondary.btn--light:before, fieldset[disabled] .btn-secondary.btn--light:after { opacity: 0.2; } .btn-secondary.disabled, .btn-secondary.disabled:hover, .btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary.disabled:active, .btn-secondary.disabled.active, .btn-secondary[disabled], .btn-secondary[disabled]:hover, .btn-secondary[disabled]:focus, .btn-secondary[disabled].focus, .btn-secondary[disabled]:active, .btn-secondary[disabled].active, fieldset[disabled] .btn-secondary, fieldset[disabled] .btn-secondary:hover, fieldset[disabled] .btn-secondary:focus, fieldset[disabled] .btn-secondary.focus, fieldset[disabled] .btn-secondary:active, fieldset[disabled] .btn-secondary.active, .btn-secondary--light.disabled, .btn-secondary--light.disabled:hover, .btn-secondary--light.disabled:focus, .btn-secondary--light.disabled.focus, .btn-secondary--light.disabled:active, .btn-secondary--light.disabled.active, .btn-secondary--light[disabled], .btn-secondary--light[disabled]:hover, .btn-secondary--light[disabled]:focus, .btn-secondary--light[disabled].focus, .btn-secondary--light[disabled]:active, .btn-secondary--light[disabled].active, fieldset[disabled] .btn-secondary--light, fieldset[disabled] .btn-secondary--light:hover, fieldset[disabled] .btn-secondary--light:focus, fieldset[disabled] .btn-secondary--light.focus, fieldset[disabled] .btn-secondary--light:active, fieldset[disabled] .btn-secondary--light.active, .btn-secondary.t-light.disabled, .btn-secondary.t-light.disabled:hover, .btn-secondary.t-light.disabled:focus, .btn-secondary.t-light.disabled.focus, .btn-secondary.t-light.disabled:active, .btn-secondary.t-light.disabled.active, .btn-secondary.t-light[disabled], .btn-secondary.t-light[disabled]:hover, .btn-secondary.t-light[disabled]:focus, .btn-secondary.t-light[disabled].focus, .btn-secondary.t-light[disabled]:active, .btn-secondary.t-light[disabled].active, fieldset[disabled] .btn-secondary.t-light, fieldset[disabled] .btn-secondary.t-light:hover, fieldset[disabled] .btn-secondary.t-light:focus, fieldset[disabled] .btn-secondary.t-light.focus, fieldset[disabled] .btn-secondary.t-light:active, fieldset[disabled] .btn-secondary.t-light.active, .btn-secondary.btn--light.disabled, .btn-secondary.btn--light.disabled:hover, .btn-secondary.btn--light.disabled:focus, .btn-secondary.btn--light.disabled.focus, .btn-secondary.btn--light.disabled:active, .btn-secondary.btn--light.disabled.active, .btn-secondary.btn--light[disabled], .btn-secondary.btn--light[disabled]:hover, .btn-secondary.btn--light[disabled]:focus, .btn-secondary.btn--light[disabled].focus, .btn-secondary.btn--light[disabled]:active, .btn-secondary.btn--light[disabled].active, fieldset[disabled] .btn-secondary.btn--light, fieldset[disabled] .btn-secondary.btn--light:hover, fieldset[disabled] .btn-secondary.btn--light:focus, fieldset[disabled] .btn-secondary.btn--light.focus, fieldset[disabled] .btn-secondary.btn--light:active, fieldset[disabled] .btn-secondary.btn--light.active { color: var(--pk-interaction--light); border-color: var(--pk-interaction--light); background-color: #0000; } .btn-secondary.disabled pk-icon, .btn-secondary.disabled:hover pk-icon, .btn-secondary.disabled:focus pk-icon, .btn-secondary.disabled.focus pk-icon, .btn-secondary.disabled:active pk-icon, .btn-secondary.disabled.active pk-icon, .btn-secondary[disabled] pk-icon, .btn-secondary[disabled]:hover pk-icon, .btn-secondary[disabled]:focus pk-icon, .btn-secondary[disabled].focus pk-icon, .btn-secondary[disabled]:active pk-icon, .btn-secondary[disabled].active pk-icon, fieldset[disabled] .btn-secondary pk-icon, fieldset[disabled] .btn-secondary:hover pk-icon, fieldset[disabled] .btn-secondary:focus pk-icon, fieldset[disabled] .btn-secondary.focus pk-icon, fieldset[disabled] .btn-secondary:active pk-icon, fieldset[disabled] .btn-secondary.active pk-icon, .btn-secondary--light.disabled pk-icon, .btn-secondary--light.disabled:hover pk-icon, .btn-secondary--light.disabled:focus pk-icon, .btn-secondary--light.disabled.focus pk-icon, .btn-secondary--light.disabled:active pk-icon, .btn-secondary--light.disabled.active pk-icon, .btn-secondary--light[disabled] pk-icon, .btn-secondary--light[disabled]:hover pk-icon, .btn-secondary--light[disabled]:focus pk-icon, .btn-secondary--light[disabled].focus pk-icon, .btn-secondary--light[disabled]:active pk-icon, .btn-secondary--light[disabled].active pk-icon, fieldset[disabled] .btn-secondary--light pk-icon, fieldset[disabled] .btn-secondary--light:hover pk-icon, fieldset[disabled] .btn-secondary--light:focus pk-icon, fieldset[disabled] .btn-secondary--light.focus pk-icon, fieldset[disabled] .btn-secondary--light:active pk-icon, fieldset[disabled] .btn-secondary--light.active pk-icon, .btn-secondary.t-light.disabled pk-icon, .btn-secondary.t-light.disabled:hover pk-icon, .btn-secondary.t-light.disabled:focus pk-icon, .btn-secondary.t-light.disabled.focus pk-icon, .btn-secondary.t-light.disabled:active pk-icon, .btn-secondary.t-light.disabled.active pk-icon, .btn-secondary.t-light[disabled] pk-icon, .btn-secondary.t-light[disabled]:hover pk-icon, .btn-secondary.t-light[disabled]:focus pk-icon, .btn-secondary.t-light[disabled].focus pk-icon, .btn-secondary.t-light[disabled]:active pk-icon, .btn-secondary.t-light[disabled].active pk-icon, fieldset[disabled] .btn-secondary.t-light pk-icon, fieldset[disabled] .btn-secondary.t-light:hover pk-icon, fieldset[disabled] .btn-secondary.t-light:focus pk-icon, fieldset[disabled] .btn-secondary.t-light.focus pk-icon, fieldset[disabled] .btn-secondary.t-light:active pk-icon, fieldset[disabled] .btn-secondary.t-light.active pk-icon, .btn-secondary.btn--light.disabled pk-icon, .btn-secondary.btn--light.disabled:hover pk-icon, .btn-secondary.btn--light.disabled:focus pk-icon, .btn-secondary.btn--light.disabled.focus pk-icon, .btn-secondary.btn--light.disabled:active pk-icon, .btn-secondary.btn--light.disabled.active pk-icon, .btn-secondary.btn--light[disabled] pk-icon, .btn-secondary.btn--light[disabled]:hover pk-icon, .btn-secondary.btn--light[disabled]:focus pk-icon, .btn-secondary.btn--light[disabled].focus pk-icon, .btn-secondary.btn--light[disabled]:active pk-icon, .btn-secondary.btn--light[disabled].active pk-icon, fieldset[disabled] .btn-secondary.btn--light pk-icon, fieldset[disabled] .btn-secondary.btn--light:hover pk-icon, fieldset[disabled] .btn-secondary.btn--light:focus pk-icon, fieldset[disabled] .btn-secondary.btn--light.focus pk-icon, fieldset[disabled] .btn-secondary.btn--light:active pk-icon, fieldset[disabled] .btn-secondary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction--light); } .btn-secondary .btn-icon-border, .btn-secondary--light .btn-icon-border, .btn-secondary.t-light .btn-icon-border, .btn-secondary.btn--light .btn-icon-border { border: 1px solid var(--pk-interaction--light); } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary.focus, .btn-secondary:active, .btn-secondary.active, .btn-secondary--light:hover, .btn-secondary--light:focus, .btn-secondary--light.focus, .btn-secondary--light:active, .btn-secondary--light.active, .btn-secondary.t-light:hover, .btn-secondary.t-light:focus, .btn-secondary.t-light.focus, .btn-secondary.t-light:active, .btn-secondary.t-light.active, .btn-secondary.btn--light:hover, .btn-secondary.btn--light:focus, .btn-secondary.btn--light.focus, .btn-secondary.btn--light:active, .btn-secondary.btn--light.active { box-shadow: none; outline: none; } .btn-secondary:hover .btn-icon-border, .btn-secondary:focus .btn-icon-border, .btn-secondary.focus .btn-icon-border, .btn-secondary:active .btn-icon-border, .btn-secondary.active .btn-icon-border, .btn-secondary--light:hover .btn-icon-border, .btn-secondary--light:focus .btn-icon-border, .btn-secondary--light.focus .btn-icon-border, .btn-secondary--light:active .btn-icon-border, .btn-secondary--light.active .btn-icon-border, .btn-secondary.t-light:hover .btn-icon-border, .btn-secondary.t-light:focus .btn-icon-border, .btn-secondary.t-light.focus .btn-icon-border, .btn-secondary.t-light:active .btn-icon-border, .btn-secondary.t-light.active .btn-icon-border, .btn-secondary.btn--light:hover .btn-icon-border, .btn-secondary.btn--light:focus .btn-icon-border, .btn-secondary.btn--light.focus .btn-icon-border, .btn-secondary.btn--light:active .btn-icon-border, .btn-secondary.btn--light.active .btn-icon-border { border-color: var(--pk-interaction-compl--light); } .btn-secondary:focus, .btn-secondary:active:focus, .btn-secondary--light:focus, .btn-secondary--light:active:focus, .btn-secondary.t-light:focus, .btn-secondary.t-light:active:focus, .btn-secondary.btn--light:focus, .btn-secondary.btn--light:active:focus { box-shadow: none; outline: none; } @media (hover: none) and (pointer: coarse) { .btn-secondary:active, .btn-secondary.active, .btn-secondary--light:active, .btn-secondary--light.active, .btn-secondary.t-light:active, .btn-secondary.t-light.active, .btn-secondary.btn--light:active, .btn-secondary.btn--light.active { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: var(--pk-interaction--light); transition-duration: 0.1s; } .btn-secondary:active pk-icon, .btn-secondary.active pk-icon, .btn-secondary--light:active pk-icon, .btn-secondary--light.active pk-icon, .btn-secondary.t-light:active pk-icon, .btn-secondary.t-light.active pk-icon, .btn-secondary.btn--light:active pk-icon, .btn-secondary.btn--light.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } .btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus, .btn-secondary--light:active:hover, .btn-secondary--light:active:focus, .btn-secondary--light:active.focus, .btn-secondary--light.active:hover, .btn-secondary--light.active:focus, .btn-secondary--light.active.focus, .btn-secondary.t-light:active:hover, .btn-secondary.t-light:active:focus, .btn-secondary.t-light:active.focus, .btn-secondary.t-light.active:hover, .btn-secondary.t-light.active:focus, .btn-secondary.t-light.active.focus, .btn-secondary.btn--light:active:hover, .btn-secondary.btn--light:active:focus, .btn-secondary.btn--light:active.focus, .btn-secondary.btn--light.active:hover, .btn-secondary.btn--light.active:focus, .btn-secondary.btn--light.active.focus { color: var(--pk-interaction-compl--light); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--light)); border-color: var(--pk-interaction--light); outline: none; transition-duration: 0.1s; } .btn-secondary:active:hover pk-icon, .btn-secondary:active:focus pk-icon, .btn-secondary:active.focus pk-icon, .btn-secondary.active:hover pk-icon, .btn-secondary.active:focus pk-icon, .btn-secondary.active.focus pk-icon, .btn-secondary--light:active:hover pk-icon, .btn-secondary--light:active:focus pk-icon, .btn-secondary--light:active.focus pk-icon, .btn-secondary--light.active:hover pk-icon, .btn-secondary--light.active:focus pk-icon, .btn-secondary--light.active.focus pk-icon, .btn-secondary.t-light:active:hover pk-icon, .btn-secondary.t-light:active:focus pk-icon, .btn-secondary.t-light:active.focus pk-icon, .btn-secondary.t-light.active:hover pk-icon, .btn-secondary.t-light.active:focus pk-icon, .btn-secondary.t-light.active.focus pk-icon, .btn-secondary.btn--light:active:hover pk-icon, .btn-secondary.btn--light:active:focus pk-icon, .btn-secondary.btn--light:active.focus pk-icon, .btn-secondary.btn--light.active:hover pk-icon, .btn-secondary.btn--light.active:focus pk-icon, .btn-secondary.btn--light.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--light); } } .btn-secondary--dark, .btn-secondary.t-dark, .btn-secondary.btn--dark { font-family: var(--pk-font-base-semibold); color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); text-transform: none; background-color: #0000001a; transition-property: color, border-color, background-color; transition-duration: 0.3s; } .btn-secondary--dark pk-icon, .btn-secondary.t-dark pk-icon, .btn-secondary.btn--dark pk-icon { --pk-icon--color: var(--pk-interaction--dark); } .btn-secondary--dark:focus, .btn-secondary--dark.focus, .btn-secondary.t-dark:focus, .btn-secondary.t-dark.focus, .btn-secondary.btn--dark:focus, .btn-secondary.btn--dark.focus { color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); background-color: #0000001a; outline: none; } .btn-secondary--dark:hover, .btn-secondary.t-dark:hover, .btn-secondary.btn--dark:hover { color: var(--pk-interaction-compl--dark); background-color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); } .btn-secondary--dark:hover pk-icon, .btn-secondary.t-dark:hover pk-icon, .btn-secondary.btn--dark:hover pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-secondary--dark:active, .btn-secondary--dark.active, .btn-secondary.t-dark:active, .btn-secondary.t-dark.active, .btn-secondary.btn--dark:active, .btn-secondary.btn--dark.active { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); } .btn-secondary--dark:active pk-icon, .btn-secondary--dark.active pk-icon, .btn-secondary.t-dark:active pk-icon, .btn-secondary.t-dark.active pk-icon, .btn-secondary.btn--dark:active pk-icon, .btn-secondary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-secondary--dark:active:hover, .btn-secondary--dark:active:focus, .btn-secondary--dark:active.focus, .btn-secondary--dark.active:hover, .btn-secondary--dark.active:focus, .btn-secondary--dark.active.focus, .btn-secondary.t-dark:active:hover, .btn-secondary.t-dark:active:focus, .btn-secondary.t-dark:active.focus, .btn-secondary.t-dark.active:hover, .btn-secondary.t-dark.active:focus, .btn-secondary.t-dark.active.focus, .btn-secondary.btn--dark:active:hover, .btn-secondary.btn--dark:active:focus, .btn-secondary.btn--dark:active.focus, .btn-secondary.btn--dark.active:hover, .btn-secondary.btn--dark.active:focus, .btn-secondary.btn--dark.active.focus { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); outline: none; } .btn-secondary--dark:active:hover pk-icon, .btn-secondary--dark:active:focus pk-icon, .btn-secondary--dark:active.focus pk-icon, .btn-secondary--dark.active:hover pk-icon, .btn-secondary--dark.active:focus pk-icon, .btn-secondary--dark.active.focus pk-icon, .btn-secondary.t-dark:active:hover pk-icon, .btn-secondary.t-dark:active:focus pk-icon, .btn-secondary.t-dark:active.focus pk-icon, .btn-secondary.t-dark.active:hover pk-icon, .btn-secondary.t-dark.active:focus pk-icon, .btn-secondary.t-dark.active.focus pk-icon, .btn-secondary.btn--dark:active:hover pk-icon, .btn-secondary.btn--dark:active:focus pk-icon, .btn-secondary.btn--dark:active.focus pk-icon, .btn-secondary.btn--dark.active:hover pk-icon, .btn-secondary.btn--dark.active:focus pk-icon, .btn-secondary.btn--dark.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } @media (hover: none) { .btn-secondary--dark:hover, .btn-secondary--dark:active, .btn-secondary--dark:focus, .btn-secondary.t-dark:hover, .btn-secondary.t-dark:active, .btn-secondary.t-dark:focus, .btn-secondary.btn--dark:hover, .btn-secondary.btn--dark:active, .btn-secondary.btn--dark:focus { color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); background-color: #0000001a; outline: none; } .btn-secondary--dark:hover pk-icon, .btn-secondary--dark:active pk-icon, .btn-secondary--dark:focus pk-icon, .btn-secondary.t-dark:hover pk-icon, .btn-secondary.t-dark:active pk-icon, .btn-secondary.t-dark:focus pk-icon, .btn-secondary.btn--dark:hover pk-icon, .btn-secondary.btn--dark:active pk-icon, .btn-secondary.btn--dark:focus pk-icon { --pk-icon--color: var(--pk-interaction--dark); } } .btn-secondary--dark.disabled, .btn-secondary--dark[disabled], fieldset[disabled] .btn-secondary--dark, .btn-secondary.t-dark.disabled, .btn-secondary.t-dark[disabled], fieldset[disabled] .btn-secondary.t-dark, .btn-secondary.btn--dark.disabled, .btn-secondary.btn--dark[disabled], fieldset[disabled] .btn-secondary.btn--dark { opacity: 0.4; cursor: default; pointer-events: none; } .btn-secondary--dark.disabled:before, .btn-secondary--dark.disabled:after, .btn-secondary--dark[disabled]:before, .btn-secondary--dark[disabled]:after, fieldset[disabled] .btn-secondary--dark:before, fieldset[disabled] .btn-secondary--dark:after, .btn-secondary.t-dark.disabled:before, .btn-secondary.t-dark.disabled:after, .btn-secondary.t-dark[disabled]:before, .btn-secondary.t-dark[disabled]:after, fieldset[disabled] .btn-secondary.t-dark:before, fieldset[disabled] .btn-secondary.t-dark:after, .btn-secondary.btn--dark.disabled:before, .btn-secondary.btn--dark.disabled:after, .btn-secondary.btn--dark[disabled]:before, .btn-secondary.btn--dark[disabled]:after, fieldset[disabled] .btn-secondary.btn--dark:before, fieldset[disabled] .btn-secondary.btn--dark:after { opacity: 0.2; } .btn-secondary--dark.disabled, .btn-secondary--dark.disabled:hover, .btn-secondary--dark.disabled:focus, .btn-secondary--dark.disabled.focus, .btn-secondary--dark.disabled:active, .btn-secondary--dark.disabled.active, .btn-secondary--dark[disabled], .btn-secondary--dark[disabled]:hover, .btn-secondary--dark[disabled]:focus, .btn-secondary--dark[disabled].focus, .btn-secondary--dark[disabled]:active, .btn-secondary--dark[disabled].active, fieldset[disabled] .btn-secondary--dark, fieldset[disabled] .btn-secondary--dark:hover, fieldset[disabled] .btn-secondary--dark:focus, fieldset[disabled] .btn-secondary--dark.focus, fieldset[disabled] .btn-secondary--dark:active, fieldset[disabled] .btn-secondary--dark.active, .btn-secondary.t-dark.disabled, .btn-secondary.t-dark.disabled:hover, .btn-secondary.t-dark.disabled:focus, .btn-secondary.t-dark.disabled.focus, .btn-secondary.t-dark.disabled:active, .btn-secondary.t-dark.disabled.active, .btn-secondary.t-dark[disabled], .btn-secondary.t-dark[disabled]:hover, .btn-secondary.t-dark[disabled]:focus, .btn-secondary.t-dark[disabled].focus, .btn-secondary.t-dark[disabled]:active, .btn-secondary.t-dark[disabled].active, fieldset[disabled] .btn-secondary.t-dark, fieldset[disabled] .btn-secondary.t-dark:hover, fieldset[disabled] .btn-secondary.t-dark:focus, fieldset[disabled] .btn-secondary.t-dark.focus, fieldset[disabled] .btn-secondary.t-dark:active, fieldset[disabled] .btn-secondary.t-dark.active, .btn-secondary.btn--dark.disabled, .btn-secondary.btn--dark.disabled:hover, .btn-secondary.btn--dark.disabled:focus, .btn-secondary.btn--dark.disabled.focus, .btn-secondary.btn--dark.disabled:active, .btn-secondary.btn--dark.disabled.active, .btn-secondary.btn--dark[disabled], .btn-secondary.btn--dark[disabled]:hover, .btn-secondary.btn--dark[disabled]:focus, .btn-secondary.btn--dark[disabled].focus, .btn-secondary.btn--dark[disabled]:active, .btn-secondary.btn--dark[disabled].active, fieldset[disabled] .btn-secondary.btn--dark, fieldset[disabled] .btn-secondary.btn--dark:hover, fieldset[disabled] .btn-secondary.btn--dark:focus, fieldset[disabled] .btn-secondary.btn--dark.focus, fieldset[disabled] .btn-secondary.btn--dark:active, fieldset[disabled] .btn-secondary.btn--dark.active { color: var(--pk-interaction--dark); border-color: var(--pk-interaction--dark); background-color: #0000001a; } .btn-secondary--dark.disabled pk-icon, .btn-secondary--dark.disabled:hover pk-icon, .btn-secondary--dark.disabled:focus pk-icon, .btn-secondary--dark.disabled.focus pk-icon, .btn-secondary--dark.disabled:active pk-icon, .btn-secondary--dark.disabled.active pk-icon, .btn-secondary--dark[disabled] pk-icon, .btn-secondary--dark[disabled]:hover pk-icon, .btn-secondary--dark[disabled]:focus pk-icon, .btn-secondary--dark[disabled].focus pk-icon, .btn-secondary--dark[disabled]:active pk-icon, .btn-secondary--dark[disabled].active pk-icon, fieldset[disabled] .btn-secondary--dark pk-icon, fieldset[disabled] .btn-secondary--dark:hover pk-icon, fieldset[disabled] .btn-secondary--dark:focus pk-icon, fieldset[disabled] .btn-secondary--dark.focus pk-icon, fieldset[disabled] .btn-secondary--dark:active pk-icon, fieldset[disabled] .btn-secondary--dark.active pk-icon, .btn-secondary.t-dark.disabled pk-icon, .btn-secondary.t-dark.disabled:hover pk-icon, .btn-secondary.t-dark.disabled:focus pk-icon, .btn-secondary.t-dark.disabled.focus pk-icon, .btn-secondary.t-dark.disabled:active pk-icon, .btn-secondary.t-dark.disabled.active pk-icon, .btn-secondary.t-dark[disabled] pk-icon, .btn-secondary.t-dark[disabled]:hover pk-icon, .btn-secondary.t-dark[disabled]:focus pk-icon, .btn-secondary.t-dark[disabled].focus pk-icon, .btn-secondary.t-dark[disabled]:active pk-icon, .btn-secondary.t-dark[disabled].active pk-icon, fieldset[disabled] .btn-secondary.t-dark pk-icon, fieldset[disabled] .btn-secondary.t-dark:hover pk-icon, fieldset[disabled] .btn-secondary.t-dark:focus pk-icon, fieldset[disabled] .btn-secondary.t-dark.focus pk-icon, fieldset[disabled] .btn-secondary.t-dark:active pk-icon, fieldset[disabled] .btn-secondary.t-dark.active pk-icon, .btn-secondary.btn--dark.disabled pk-icon, .btn-secondary.btn--dark.disabled:hover pk-icon, .btn-secondary.btn--dark.disabled:focus pk-icon, .btn-secondary.btn--dark.disabled.focus pk-icon, .btn-secondary.btn--dark.disabled:active pk-icon, .btn-secondary.btn--dark.disabled.active pk-icon, .btn-secondary.btn--dark[disabled] pk-icon, .btn-secondary.btn--dark[disabled]:hover pk-icon, .btn-secondary.btn--dark[disabled]:focus pk-icon, .btn-secondary.btn--dark[disabled].focus pk-icon, .btn-secondary.btn--dark[disabled]:active pk-icon, .btn-secondary.btn--dark[disabled].active pk-icon, fieldset[disabled] .btn-secondary.btn--dark pk-icon, fieldset[disabled] .btn-secondary.btn--dark:hover pk-icon, fieldset[disabled] .btn-secondary.btn--dark:focus pk-icon, fieldset[disabled] .btn-secondary.btn--dark.focus pk-icon, fieldset[disabled] .btn-secondary.btn--dark:active pk-icon, fieldset[disabled] .btn-secondary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction--dark); } .btn-secondary--dark .btn-icon-border, .btn-secondary.t-dark .btn-icon-border, .btn-secondary.btn--dark .btn-icon-border { border: 1px solid var(--pk-interaction--dark); } .btn-secondary--dark:hover, .btn-secondary--dark:focus, .btn-secondary--dark.focus, .btn-secondary--dark:active, .btn-secondary--dark.active, .btn-secondary.t-dark:hover, .btn-secondary.t-dark:focus, .btn-secondary.t-dark.focus, .btn-secondary.t-dark:active, .btn-secondary.t-dark.active, .btn-secondary.btn--dark:hover, .btn-secondary.btn--dark:focus, .btn-secondary.btn--dark.focus, .btn-secondary.btn--dark:active, .btn-secondary.btn--dark.active { box-shadow: none; outline: none; } .btn-secondary--dark:hover .btn-icon-border, .btn-secondary--dark:focus .btn-icon-border, .btn-secondary--dark.focus .btn-icon-border, .btn-secondary--dark:active .btn-icon-border, .btn-secondary--dark.active .btn-icon-border, .btn-secondary.t-dark:hover .btn-icon-border, .btn-secondary.t-dark:focus .btn-icon-border, .btn-secondary.t-dark.focus .btn-icon-border, .btn-secondary.t-dark:active .btn-icon-border, .btn-secondary.t-dark.active .btn-icon-border, .btn-secondary.btn--dark:hover .btn-icon-border, .btn-secondary.btn--dark:focus .btn-icon-border, .btn-secondary.btn--dark.focus .btn-icon-border, .btn-secondary.btn--dark:active .btn-icon-border, .btn-secondary.btn--dark.active .btn-icon-border { border-color: var(--pk-interaction-compl--dark); } .btn-secondary--dark:focus, .btn-secondary--dark:active:focus, .btn-secondary.t-dark:focus, .btn-secondary.t-dark:active:focus, .btn-secondary.btn--dark:focus, .btn-secondary.btn--dark:active:focus { box-shadow: none; outline: none; } @media (hover: none) and (pointer: coarse) { .btn-secondary--dark:active, .btn-secondary--dark.active, .btn-secondary.t-dark:active, .btn-secondary.t-dark.active, .btn-secondary.btn--dark:active, .btn-secondary.btn--dark.active { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: var(--pk-interaction--dark); transition-duration: 0.1s; } .btn-secondary--dark:active pk-icon, .btn-secondary--dark.active pk-icon, .btn-secondary.t-dark:active pk-icon, .btn-secondary.t-dark.active pk-icon, .btn-secondary.btn--dark:active pk-icon, .btn-secondary.btn--dark.active pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } .btn-secondary--dark:active:hover, .btn-secondary--dark:active:focus, .btn-secondary--dark:active.focus, .btn-secondary--dark.active:hover, .btn-secondary--dark.active:focus, .btn-secondary--dark.active.focus, .btn-secondary.t-dark:active:hover, .btn-secondary.t-dark:active:focus, .btn-secondary.t-dark:active.focus, .btn-secondary.t-dark.active:hover, .btn-secondary.t-dark.active:focus, .btn-secondary.t-dark.active.focus, .btn-secondary.btn--dark:active:hover, .btn-secondary.btn--dark:active:focus, .btn-secondary.btn--dark:active.focus, .btn-secondary.btn--dark.active:hover, .btn-secondary.btn--dark.active:focus, .btn-secondary.btn--dark.active.focus { color: var(--pk-interaction-compl--dark); background-color: color-mix(in srgb, black 20%, var(--pk-interaction--dark)); border-color: var(--pk-interaction--dark); outline: none; transition-duration: 0.1s; } .btn-secondary--dark:active:hover pk-icon, .btn-secondary--dark:active:focus pk-icon, .btn-secondary--dark:active.focus pk-icon, .btn-secondary--dark.active:hover pk-icon, .btn-secondary--dark.active:focus pk-icon, .btn-secondary--dark.active.focus pk-icon, .btn-secondary.t-dark:active:hover pk-icon, .btn-secondary.t-dark:active:focus pk-icon, .btn-secondary.t-dark:active.focus pk-icon, .btn-secondary.t-dark.active:hover pk-icon, .btn-secondary.t-dark.active:focus pk-icon, .btn-secondary.t-dark.active.focus pk-icon, .btn-secondary.btn--dark:active:hover pk-icon, .btn-secondary.btn--dark:active:focus pk-icon, .btn-secondary.btn--dark:active.focus pk-icon, .btn-secondary.btn--dark.active:hover pk-icon, .btn-secondary.btn--dark.active:focus pk-icon, .btn-secondary.btn--dark.active.focus pk-icon { --pk-icon--color: var(--pk-interaction-compl--dark); } } .btn-secondary, .btn-primary, .btn-inverse { white-space: normal; } .follow-btn:not(.is-live) { display: none; } [class*='\ icon-'], [class^='icon-'] { speak: none; font-feature-settings: normal; font-variant: normal; text-transform: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: 4px; font-family: icomoon; font-style: normal; font-weight: 400; line-height: 1; } .icon-vk:before { content: ''; } .icon-edit-no-line:before { content: ''; } .icon-plus:before { content: ''; } .icon-close:before { content: ''; } .icon-ext-link:before { content: ''; } .icon-search:before { content: ''; } .icon-login:before { content: ''; } .icon-items:before { content: ''; } .icon-arrow-left:before { content: ''; } .icon-arrow-right:before { content: ''; } .icon-arrow-thick-down:before { content: ''; } .icon-arrow-thick-left:before { content: ''; } .icon-arrow-thick-top:before { content: ''; } .icon-arrow-thick-right:before { content: ''; } .icon-arrow-thin-down:before { content: ''; } .icon-arrow-thin-left:before { content: ''; } .icon-arrow-thin-top:before { content: ''; } .icon-arrow-thin-right:before { content: ''; } .icon-facebook:before { content: ''; } .icon-twitter:before { content: ''; } .icon-youtube:before, .icon-youTube:before { content: ''; } .icon-instagram:before { content: ''; } .icon-play:before { content: ''; } .icon-mic-on:before { content: ''; } .icon-mic-off:before { content: ''; } .icon-heart:before { content: ''; } .icon-cross:before { content: ''; } .icon-calendar:before { content: ''; } .icon-vine:before { content: ''; } .icon-google:before { content: ''; } .icon-checkmark:before { content: ''; } .icon-download:before { content: ''; } .icon-edit:before { content: ''; } .icon-filter:before { content: ''; } .icon-highlights:before { content: ''; } .icon-lock:before { content: ''; } .icon-replay:before { content: ''; } .icon-linkedin:before { content: ''; } .icon-expand:before { content: ''; } .icon-gallery:before { content: ''; } .icon-Minimize-View:before { content: ''; } .icon-Expand-View:before { content: ''; } .icon-share:before { content: ''; } .icon-trend-stable:before { content: ''; color: #afb5bc; } .icon-trend-down:before { content: ''; color: #e32231; } .icon-trend-up:before { content: ''; color: #5db75d; } .icon-tooltip:before { content: ''; } .svg-icon { box-sizing: initial; width: var(--pk-font-size-xl2); height: var(--pk-font-size-xl2); fill: currentColor; background-color: #0000; display: inline-block; } .main-wrap .footer-wrap { width: 100%; color: var(--uefacom-footer-text-color, #fff); font-size: var(--pk-font-size-s); background-color: var(--uefacom-footer-mobile-bg, var(--uefacom-bgcolor-page, var(--pk-background))); background-image: var(--uefacom-footer-mobile-bg-img,var(--uefacom-footer-bg-image,url(https://img.uefa.com/imgml/uefacom/elements/main-nav/uefa-nav-bg.jpg))); background-position: var(--uefacom-footer-mobile-bg-img-position, unset); background-size: var(--uefacom-footer-mobile-bg-img-size, cover); background-repeat: no-repeat; position: relative; overflow: hidden; } .main-wrap .footer-wrap:after { content: ''; background: var(--uefacom-footer-mobile-gradient, none); width: 100%; height: 100%; display: block; position: absolute; top: 0; } @media (width>=768px) and (width<=959px) { .main-wrap .footer-wrap { background-position: 32% 0; } } @media (width>=960px) and (width<=1439px) { .main-wrap .footer-wrap { background-size: cover; } } @media (width>=1440px) { .main-wrap .footer-wrap:after { height: var(--uefacom-footer-bottom-margin-sm, 200px); } } .main-wrap .footer-wrap .section { z-index: 1; background-color: #0000; } .main-wrap .footer-wrap .section ul li { margin: 5px 0; } .main-wrap .footer-wrap .section ul li a { color: var(--uefacom-footer-text-color, #fff); transition: none; } .main-wrap .footer-wrap .parent-hub-link { display: none; } .main-wrap .footer-wrap .footer-section { clear: both; background-color: #aad7f133; border: none; height: 1px; overflow: hidden; } @media (width>=960px) { .main-wrap .footer-wrap .footer-section { background-color: #aad7f133; border-left: 1px solid #aad7f133; } } .main-wrap .footer-wrap .apps-tool { width: 285px; margin: 10px auto; display: block; } .main-wrap .footer-wrap .apps-tool .app-a, .main-wrap .footer-wrap .apps-tool .app-g { width: 130px; display: inline-block; } .main-wrap .footer-wrap .apps-tool .app-a img, .main-wrap .footer-wrap .apps-tool .app-g img { aspect-ratio: 13/4; } .main-wrap .footer-wrap .section.social.apps .pk-container { padding-top: 0; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool { text-align: center; margin: 0; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool .social-tool-lbl { height: 40px; line-height: 40px; display: block; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool li { margin: 5px; display: inline-block; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool li a { border: 1px solid var(--uefacom-footer-text-color, #fff); border-radius: 20px; justify-content: center; align-items: center; width: 40px; height: 40px; margin: 0; padding: 0; display: inline-flex; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool li a:before { color: var(--uefacom-footer-text-color, #fff); line-height: 39px; } .main-wrap .footer-wrap .section.social.apps .social-wrap .social-tool li a pk-icon { --pk-icon--color: var(--uefacom-footer-text-color, #fff); } .main-wrap .footer-wrap .footer-service-nav { text-align: center; font-size: var(--pk-font-size-xs); } .main-wrap .footer-wrap .footer-service-nav ul li { padding: 0 var(--pk-spacing-xl); display: inline-block; } .main-wrap .footer-wrap .footer-disclaimer { text-align: center; color: #ccc; line-height: 20px; font-size: var(--pk-font-size-xs); opacity: 0.6; margin-top: 20px; } .main-wrap .footer-wrap .footer-disclaimer p { margin: 0; } .main-wrap .footer-wrap .footer-disclaimer p:nth-child(2) { display: none; } .main-wrap .footer-wrap .section.footer-nav .footer-lang-switcher ul li { float: left; width: 50%; } .main-wrap .footer-wrap .section.footer-nav .footer-lang-switcher ul li:nth-child(odd) { padding-right: var(--pk-spacing-m); } .main-wrap .footer-wrap .section.footer-nav .footer-lang-switcher ul li:nth-child(2n) { padding-left: var(--pk-spacing-m); } .main-wrap .footer-wrap .section.footer-bottom { margin-bottom: var(--uefacom-footer-bottom-margin-xs, 240px); } .main-wrap .footer-wrap .section.footer-bottom .pk-container { padding-top: 0; } .main-wrap .footer-wrap h3.navbar-competitions-title { color: var(--uefacom-footer-title-color, #fff); font-size: var(--pk-font-size-m); text-transform: uppercase; margin-top: 0; margin-bottom: 15px; } .main-wrap .footer-wrap .comp-date { margin-bottom: 15px; } .main-wrap .footer-wrap .watermark-footer { z-index: 1; background-repeat: no-repeat; background-size: 320px; width: 320px; height: 95px; margin: auto; position: absolute; bottom: 0; left: 0; right: 0; } @media (width>=768px) { .main-wrap .footer-wrap { background-color: var(--uefacom-footer-bg, var(--uefacom-bgcolor-page, var(--pk-background))); background-image: var(--uefacom-footer-desktop-bg-img,var(--uefacom-footer-bg-image,url(https://img.uefa.com/imgml/uefacom/elements/main-nav/uefa-nav-bg.jpg))); background-position: var(--uefacom-footer-desktop-bg-img-position, unset); background-size: var(--uefacom-footer-desktop-bg-img-size, cover); } .main-wrap .footer-wrap .section.footer-nav .footer-myuefacom ul li { float: left; width: 50%; } .main-wrap .footer-wrap .section.footer-nav .footer-myuefacom ul li:nth-child(odd) { padding-right: var(--pk-spacing-m); } .main-wrap .footer-wrap .section.footer-nav .footer-myuefacom ul li:nth-child(2n) { padding-left: var(--pk-spacing-m); } .main-wrap .footer-wrap .footer-service-nav { padding: 10px 0; } .main-wrap .footer-wrap .pk-container { margin-bottom: 15px; } .main-wrap .footer-wrap .section.footer-bottom { margin-bottom: var(--uefacom-footer-bottom-margin-sm, 200px); } } @media (width>=960px) { .main-wrap .footer-wrap { position: relative; } .main-wrap .footer-wrap:after, .main-wrap .footer-wrap .footer-section { display: none; } .main-wrap .footer-wrap .section.footer-nav .footer-lang-switcher ul li, .main-wrap .footer-wrap .section.footer-nav .footer-myuefacom ul li { float: none; width: 100%; padding: 0 !important; } .main-wrap .footer-wrap .section.social.apps .social-tool { display: inline-block; } .main-wrap .footer-wrap .section.social.apps .social-tool li { float: left; } .main-wrap .footer-wrap .section.social.apps .apps-tool { float: right; width: auto; margin: 0; display: block; } .main-wrap .footer-wrap .section.footer-bottom { margin-bottom: var(--uefacom-footer-bottom-margin-sm, 200px); } .main-wrap .footer-wrap .section.footer-bottom .pk-container { padding-bottom: 40px; } .main-wrap .footer-wrap .section.footer-bottom .footer-disclaimer p:nth-child(2) { display: block; } .main-wrap .footer-wrap .section.footer-bottom .footer-service-nav { font-size: var(--pk-font-size-s); } .main-wrap .footer-wrap .footer-network, .main-wrap .footer-wrap .footer-comp-nav, .main-wrap .footer-wrap .footer-myuefacom { margin-bottom: 0; } .main-wrap .footer-wrap .footer-network, .main-wrap .footer-wrap .footer-myuefacom, .main-wrap .footer-wrap .footer-lang-switcher { border-left: 1px solid #aad7f133; } } @media (width>=960px) and (width>=960px) { .main-wrap .footer-wrap .footer-network, .main-wrap .footer-wrap .footer-myuefacom, .main-wrap .footer-wrap .footer-lang-switcher { border-left: 1px solid #aad7f133; } } @media (width>=1200px) { .main-wrap .footer-wrap .section.footer-bottom { margin-bottom: var(--uefacom-footer-bottom-margin-sm, 200px); top: var(--uefacom-footer-bottom-top, auto); } .main-wrap .footer-wrap .section.footer-bottom .footer-disclaimer { width: 60%; margin: 20px auto 0; } } .section.footer-nav .comp-info .logolink, .section.footer-nav-neutral .comp-info .logolink { float: left; width: var(--uefacom-lv2-competition-footer-logo-w-mobile, 80px); height: var(--uefacom-lv2-competition-footer-logo-h-mobile, 80px); background-image: var(--uefacom-lv2-competition-footer-logo-mobile,var(--uefacom-lv2-competition-logo,url(https://img.uefa.com/imgml/uefacom/elements/footer/uefa-logo-footer.png))); background-position: 50%; background-repeat: no-repeat; background-size: var(--uefacom-lv2-competition-footer-logo-w-mobile, 80px) var(--uefacom-lv2-competition-footer-logo-h-mobile, 80px); text-indent: 200%; white-space: nowrap; display: block; overflow: hidden; } @media (width>=960px) { .section.footer-nav .comp-info .logolink, .section.footer-nav-neutral .comp-info .logolink { background-image: var(--uefacom-lv2-competition-footer-logo,var(--uefacom-lv2-competition-logo,url(https://img.uefa.com/imgml/uefacom/elements/footer/uefa-logo-footer.png))); width: var(--uefacom-lv2-competition-footer-logo-w, 80px); height: var(--uefacom-lv2-competition-footer-logo-h, 80px); background-size: var(--uefacom-lv2-competition-footer-logo-w, 80px) var(--uefacom-lv2-competition-footer-logo-h, 80px); } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral { color: #3c3c3c; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .navbar-competitions-title { font-size: var(--pk-font-size-s); color: #000; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .navbar-competitions-title:after { content: ''; background-color: var(--pk-primary-01); width: 25px; height: 4px; margin-top: 10px; display: block; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.corporate-items .navbar-competitions-title:after, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-menus-other .navbar-competitions-title:after, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher .navbar-competitions-title:after { display: none; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .comp-items h3.navbar-competitions-title { text-transform: uppercase; color: var(--pk-text-01); font-size: var(--pk-font-size-s); } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .navbar-macro-sec-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-menus-other .navbar-competitions-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher .navbar-competitions-title { font-size: var(--pk-font-size-m); color: var(--pk-text-02); text-transform: uppercase; border-bottom: 1px solid #ccc; margin: 10px 0; padding: 10px 0; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .navbar-macro-sec-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-menus-other .navbar-competitions-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher .navbar-competitions-title { border-bottom: 1px solid #4c4c4c; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-menus-other .navbar-competitions-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher .navbar-competitions-title { margin: 0 0 15px; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral ul li { margin: 15px 0; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral ul li { margin: 25px 0; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral ul li a { color: #3c3c3c; font-size: var(--pk-font-size-m); line-height: 25px; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .comp-items, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.corporate-items { display: none; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .comp-items, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.corporate-items { display: block; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .other-comp-link ul li { float: left; margin: 10px 0 30px; padding-left: 20px; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .other-comp-link ul li a { font-size: 18px; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .other-comp-link ul:first-of-type li:first-of-type { padding-left: 0; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .corporate-items .navbar-macro-sec-title { margin: 0 15px; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.lang-items .pk-container { margin: 0 auto; padding-top: 0; padding-bottom: 0; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items .navbar-competitions-title, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher .navbar-competitions-title { display: none; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items ul, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher ul { text-align: center; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items ul li, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher ul li { border-left: 1px dashed #4c4c4c; padding: 0 20px; display: inline-block; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items ul li:first-of-type, .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher ul li:first-of-type { border-left: none; } @media (width<=767px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .footer-lang-switcher li { float: left; width: 50%; padding: 0 10px 0 0; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items .pk-container { padding-top: 0; padding-bottom: 15px; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items .pk-container { margin-bottom: 0; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items ul { text-align: center; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items ul li { width: auto; margin: 0; padding: 0 15px; display: inline-block; border-left: none !important; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items .footer-bottom-menu { border-top: 1px solid #ccc; padding-top: 15px; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.services-items { border-top: none; } } @media (width<=767px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap { border-top: 1px solid #ccc; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool { text-align: center; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li { margin: 0 8px; display: inline-block; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li { border: 1px solid #3c3c3c; margin: 25px 15px; padding: 5px 9px; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li.social-tool-lbl { color: #3c3c3c; border: none; margin: 20px 0 10px; display: block; } @media (width>=768px) { .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li.social-tool-lbl { display: none; } } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li a { margin: 0; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li a:before { color: var(--pk-text-02); font-size: var(--pk-font-size-l); } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral .social-wrap ul.social-tool li a pk-icon { --pk-icon--color: var(--pk-text-02); } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.disclaimer-item .pk-container { padding-top: 0; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.disclaimer-item .pk-container .footer-disclaimer p { color: #3c3c3c; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.disclaimer-item .pk-container .footer-disclaimer p:nth-child(2) { display: block; } .main-wrap .footer-wrap .footer-wrap-neutral .section.footer-nav-neutral.footer-bottom { margin-bottom: 40px; } :root, :after, :before, [pk-theme], [class*='pk-theme--'], [pk-competition], [class*='pk-competition--'] { --uefacom-bg-page: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark01L.jpg); --uefacom-bg-size-d: contain; --uefacom-bg-page-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark01M.jpg); --uefacom-bg-size-m: contain; --uefacom-bg-page-position: 100% 10%; --uefacom-bg-page-repeat: no-repeat; --uefacom-bgcolor-page: var(--pk-primary-01); --uefacom-headings-font-family: var(--pk-font-comp-bold); --uefacom-background-dark-01--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark01L.jpg); --uefacom-background-dark-01--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark01M.jpg); --uefacom-background-dark-02--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark02L.jpg); --uefacom-background-dark-02--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark02M.jpg); --uefacom-background-dark-03--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark03L.jpg); --uefacom-background-dark-03--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark03M.jpg); --uefacom-background-dark-04--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark04L.jpg); --uefacom-background-dark-04--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark04M.jpg); --uefacom-background-light-01--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight01L.jpg); --uefacom-background-light-01--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight01M.jpg); --uefacom-background-light-02--l: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight02L.jpg); --uefacom-background-light-02--m: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight02M.jpg); --uefacom-section--bg-color: var(--pk-ui-01--light); --uefacom-section-bg-alternative: var(--pk-primary-01); --uefacom-section-bg-size--dark: 100% 100%; --uefacom-section-bg-size--dark-secondary: 100% 100%; --uefacom-section-bg-image--dark: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark02L.jpg); --uefacom-section-bg-image--dark-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark02M.jpg); --uefacom-section-bg-image--dark-secondary: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark03L.jpg); --uefacom-section-bg-image--dark-secondary-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark03M.jpg); --uefacom-section-bg-size--light-portrait: 100% 100%; --uefacom-section-bg-image--light-portrait: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight02L.jpg); --uefacom-section-bg-image--light-portrait-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight02M.jpg); --uefacom-section-bg-image--light-panoramic: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight01L.jpg); --uefacom-section-bg-image--light-panoramic-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundLight01M.jpg); --uefacom-section-semitransparent-color: ; --uefacom-section-bg-image-gray-mobile: none; --uefacom-section-bg-image-gray: none; --uefacom-section-bg-image-gray-big: none; --uefacom-section-bg-image-timeline--dark: linear-gradient(137.27deg, #180237 24.01%, #42237b 87.44%); --uefacom-section-bg-image-dark: none; --uefacom-section-comp-bg-color: transparent; --uefacom-section-comp-bg-image: none; --uefacom-section-comp-light-color: #fff; --uefacom-section-comp-light-bg-image: none; --uefacom-section-comp-title: var(--pk-text-01--dark); --uefacom-fallback-img-bg: var(--pk-secondary-01); --uefacom-fallback-img: url(https://img.uefa.com/imgml/uefacom/wucl/fallback.jpg); --uefacom-article-tip-bgimage: none; --uefacom-article-tip-bgimage-mobile: var(--uefacom-article-tip-bgimage, none); --uefacom-article-second-tip-bgimage: var(--uefacom-article-tip-bgimage, none); --uefacom-article-second-tip-bgimage-mobile: var( --uefacom-article-second-tip-bgimage, var(--uefacom-article-tip-bgimage, none) ); --uefacom-article-second-tip-bg-size: cover; --uefacom-article-second-tip-bg-size-mobile: cover; --uefacom-article-third-tip-bgimage: var(--uefacom-article-tip-bgimage, none); --uefacom-article-third-tip-bgimage-mobile: var( --uefacom-article-third-tip-bgimage, var(--uefacom-article-tip-bgimage, none) ); --uefacom-article-third-tip-bg-size: cover; --uefacom-article-third-tip-bg-size-mobile: cover; --uefacom-article-tip-border-radius: var(--pk-border-radius-xl); --uefacom-article-tip-bgcolor: var(--pk-elevation-01); --uefacom-article-tip-textdecoration: none; --uefacom-article-first-tip-bgcolor: var(--pk-primary-02); --uefacom-article-second-tip-bgcolor: var(--pk-elevation-01); --uefacom-article-third-tip-bgcolor: var(--pk-primary-01); --uefacom-lb-bg: transparent; --uefacom-lb-star-reporter-color: var(--pk-secondary-01); --uefacom-lb-star-reporter-role-color: var(--pk-secondary-01); --uefacom-lb-star-reporter-icon-color: var(--pk-ui-01--light); --uefacom-lb-poll-color: var(--pk-text-01--light); --uefacom-lb-poll-bg-color: var(--pk-tertiary-01); --uefacom-lb-poll-bg: url(https://img.uefa.com/imgml/uefacom/wucl/2026/liveblog/poll_L.jpg); --uefacom-lb-poll-bg-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/liveblog/poll_M.jpg); --uefacom-lb-poll-question-color: var(--pk-ui-01); --uefacom-lb-poll-result-bar-bg: #ffffffe6; --uefacom-lb-poll-answer-bg: #ffffffb3; --uefacom-lb-poll-answer-bg-hover: #fff; --uefacom-lv0-background-color: #000; --uefacom-lv0-menu-h--mobile: 40px; --uefacom-lv0-menu-h: 40px; --uefacom-lv1-background-color: var(--pk-primary-03); --uefacom-lv1-background-image: none; --uefacom-lv1-background-position: center top; --uefacom-lv1-background-size: cover; --uefacom-lv2-menu-h-desktop: 80px; --uefacom-lv2-menu-h-mobile: 54px; --uefacom-lv2-background-image: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark01L.jpg); --uefacom-lv2-competition-logo: url(https://img.uefa.com/imgml/uefacom/wucl/2026/logos/logo_dark.svg); --uefacom-lv2-affix-competition-logo: url(https://img.uefa.com/imgml/uefacom/wucl/2026/logos/logotype_dark.svg); --uefacom-lv2-affix-competition-logo-w: 84px; --uefacom-lv2-affix-competition-logo-h: 38px; --uefacom-lv2-affix-competition-logo-w-mobile: 60px; --uefacom-lv2-affix-competition-logo-h-mobile: 27px; --uefacom-sponsors-logo-image-bg: url(https://img.uefa.com/imgml/uefacom/wucl/2026/logos/logotype_light.svg); --uefacom-sponsors-logo-w: 90px; --uefacom-simple-header-default-bg: var(--pk-elevation-01); --uefacom-lv2-competition-footer-logo: url(https://img.uefa.com/imgml/uefacom/wucl/2026/logos/logo_dark.svg); --uefacom-lv2-competition-footer-logo-w: 80px; --uefacom-lv2-competition-footer-logo-h: 77px; --uefacom-lv2-competition-footer-logo-mobile: url(https://img.uefa.com/imgml/uefacom/wucl/2026/logos/logo_dark.svg); --uefacom-lv2-competition-footer-logo-w-mobile: 80px; --uefacom-lv2-competition-footer-logo-h-mobile: 80px; --uefacom-footer-bg-image: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark04L.jpg); --uefacom-footer-bg: var(--pk-primary-01); --uefacom-footer-mobile-bg: var(--pk-primary-01); --uefacom-footer-mobile-bg-img: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark04L.jpg); --uefacom-footer-mobile-bg-img-position: unset; --uefacom-footer-mobile-bg-img-size: cover; --uefacom-footer-desktop-bg-img: url(https://img.uefa.com/imgml/uefacom/wucl/2026/backgroundDark04L.jpg); --uefacom-footer-desktop-bg-img-position: unset; --uefacom-footer-desktop-bg-img-size: cover; --uefacom-footer-text-color: #fff; --uefacom-footer-title-color: var(--pk-ui-01--light); --uefacom-footer-bottom-margin-xs: 100px; --uefacom-footer-bottom-margin-sm: 200px; --uefacom-footer-bottom-top: auto; --uefacom-footer-mobile-gradient: none; }