/* Only shortcodes with a recognised icon receive this class.
   Bootstrap and the theme continue to provide button colours, padding and type. */
.dbutton--with-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75em;
    max-width: 100%;
    white-space: normal;
}

.dbutton--with-icons .dbutton__text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.dbutton--with-icons .dbutton__icon {
    display: inline-block;
    flex: 0 0 auto;
    line-height: 1;
}

/* Keep the original layout space; enlarge only the artwork within the padding. */
.dbutton--with-icons .dbutton__icon--parks {
    position: relative;
    width: 1.5em;
    height: 1.5em;
}

/* The single-colour SVG inherits the button text colour, including on hover. */
.dbutton--with-icons .dbutton__icon--parks::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.25em;
    height: 2.25em;
    transform: translate(-50%, -50%);
    background-color: currentColor;
    -webkit-mask: url('../img/icon-parks.svg') center / contain no-repeat;
    mask: url('../img/icon-parks.svg') center / contain no-repeat;
}