@import '../variables';

.pwa-button {
    background-color: $color-complementary;
    border-radius: .5rem;
    color: $color-foreground-brighter;
    display: inline-block;
    font-family: 'Bitter';
    font-size: $font-size-l;
    text-align: center;
    transition: all $animation-speed-fast $animation-ease-vibrant;
    padding: .75rem 3rem;
    position: relative;

    &:before {
        background: $color-complementary-dark;
        border-radius: .5rem;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transition: all $animation-speed-fast $animation-ease-vibrant;
        width: 100%;
        z-index: -1;
    }

    &:hover {
        color: $color-complementary-brighter;
        padding: .75rem 2.2rem;
        transition: all $animation-speed-fast $animation-ease-vibrant;

        &:before {
            $size: 10%;
            height: 100% + $size;
            left: -$size / 4;
            position: absolute;
            top: -$size / 2;
            transition: all $animation-speed-fast $animation-ease-vibrant;
            width: 100% + $size / 2;
        }
    }

    &--spaced {
        font-size: $font-size-m;
    }
}
@import '../variables';

.pwa-button {
    background-color: $color-complementary;
    border-radius: .5rem;
    color: $color-foreground-brighter;
    display: inline-block;
    font-family: 'Bitter';
    font-size: $font-size-l;
    text-align: center;
    transition: all $animation-speed-fast $animation-ease-vibrant;
    padding: .75rem 3rem;
    position: relative;

    &:hover {
        color: $color-complementary-brighter;
        padding: .75rem 2.2rem;
        transition: all $animation-speed-fast $animation-ease-vibrant;
    }

    &:focus {
        outline: 0;
    }

    &--spaced {
        font-size: $font-size-m;
    }
}
Fix button component focus style
Fix button component focus style
