@import "../var";

a,
button {
    appearance: none;
    -webkit-appearance: none;
    //display: block;
    font-family: inherit;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    border-radius: 0;
}

.btn {

    @include calc-clamp(12px, 16px);
    position: relative;
    &:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        border: 1px solid rgba(255, 255, 255, 0.5);
    }
    &:after {
        background: $accent-color;
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        width: 0;
        transition: width 300ms $easeInOutCirc;
    }
    span {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        height: 2.8em;
        padding: 0 2.4em;
        z-index: 2;
        letter-spacing: 0.02em;
        font-weight: 400;
    }

    @media screen and (hover: hover) {
        &:hover {
            &:after {
                width: 100%;
            }
        }
    }
}