/** * Copyright (c) HashiCorp, Inc. * SPDX-License-Identifier: MPL-2.0 */ label.box-label { cursor: pointer; } .box-label { @extend .box; @extend .is-centered; border-color: $grey-light; border-radius: 3px; box-shadow: $box-link-shadow; text-decoration: none; transition: box-shadow $speed; width: 100%; > div:first-child { flex-grow: 1; } &.is-column { @extend .is-flex-column; } &.is-selected { box-shadow: $box-link-hover-shadow, $box-shadow-middle; .icon { color: $grey; } } .icon { color: $grey-light; } input[type='radio'] { display: none; } input[type='radio'] + label { border: 1px solid $grey-light; border-radius: 50%; cursor: pointer; display: block; margin: 1rem auto 0; height: 1rem; width: 1rem; } input[type='radio']:checked + label { background: $blue; border: 1px solid $blue; box-shadow: inset 0 0 0 0.15rem $white; } } .box-label-header { color: $grey; .is-selected & { color: $grey-darkest; } }