// Default button
.button {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    overflow: hidden;
    padding: 0 16px;
    background: #fff;
    font-family: $font-sans-sb;
    font-size: rem(14px);
    color: $color-gray;
    border-radius: 50vh;
    text-decoration: none;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
    will-change: background-color, color;

    @include breakpoint (sm) {
        height: 48px;
        padding: 1px 24px 0;
        font-size: rem(18px);
    }

    // Icon if existing
    img, svg {
        position: relative;
        z-index: 2;
        display: block;
        width: 18px;
        height: auto;
        margin-right: 8px;

        @include breakpoint (sm) {
            width: 22px;
            height: auto;
            margin-right: 16px;
        }
    }
    svg {
        transition: all 350ms $ease-cubic;

        .anim {
            animation-delay: 100ms;
        }
    }

    // Text
    .text {
        position: relative;
        overflow: hidden;

        &:after {
            content: attr(data-text);
            opacity: 0;
            display: block;
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            transform: translateY(-120%);
        }
    }

    span {
        display: block;
    }
    span, .text:after {
        transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
        will-change: transform, opacity;
    }

    // Hover
    &:hover {
        color: #fff;
        background-color: $color-secondary;

        svg {
            fill: #fff !important;
        }
        .anim {
            animation-play-state: running;
        }
        .text {
            span {
                opacity: 0;
                transform: translateY(100%);
            }
            &:after {
                opacity: 1;
                transform: translateY(-50%);
            }
        }
    }
}