.button.secondary {
    position: relative;
    color: var(--button-secondary-color);
    padding: var(--button-secondary-padding);
    background-color: var(--button-secondary-background);
    border-radius: var(--core-border-radius);
    border: 1px solid transparent;

    // this allows more flexibility in the
    // theme colours. Having one main colour
    // that gets tinted is better than having multiple
    // colours.
    &:before {
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        width: calc(100% + 2px);
        height: calc(100% + 2px);
        border-radius: var(--core-border-radius);
        background-color: #000000;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        z-index: 0;
    }

    &.hover:not(.active) {
        &:before {
            opacity: 0.1;
        }
    }

    @media (hover: hover) {
        &:hover:not(.active) {
            &:before {
                opacity: 0.1;
            }
        }
    }

    &.disabled {
        pointer-events: none;
        opacity: var(--core-opacity-disabled);
    }

    &.active {
        color: var(--button-minimal-color-focus);

        &:before {
            opacity: 0.1;
        }
    }
}