media/css/m24/button.scss

// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use 'vars/lib' as *;

.m24-c-button {
    background-color: $m24-color-black;
    border: $border-width solid $m24-color-black;
    color: $m24-color-white;
    display: inline-block;
    font-family: var(--title-font-family);
    font-size: $text-body-md;
    font-weight: 400;
    padding: $spacer-sm $spacer-md;
    text-decoration: none;
    transition-duration: $fast;
    transition-property: background-color, border-color, color;
    transition-timing-function: $bezier;

    &:link,
    &:visited {
        color: $m24-color-white;

        &:hover,
        &:active,
        &:focus {
            background-color: $m24-color-white;
            color: $m24-color-black;
            transition-duration: $fast;
            transition-property: background-color, border-color, color;
            transition-timing-function: $bezier;
        }
    }

    &.m24-t-alt {
        border: $border-width solid $m24-color-white;
        background-color: $m24-color-white;
        color: $m24-color-black;

        &:link,
        &:visited {
            color: $m24-color-black;

            &:hover,
            &:active,
            &:focus {
                background-color: $m24-color-black;
                color: $m24-color-white;
            }
        }
    }
}