@use "vars";

.button {
    padding: 0 20px;

    width: max-content;
    height: 35px;

    position: relative;

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8px;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    border-radius: 9999px;
    border: 0 solid transparent;
    background-color: rgba(vars.$light, 0.04);
    color: vars.$light;

    overflow: hidden;

    &:before {
        content: "";

        width: 100%;
        height: 100%;

        position: absolute;
        top: 0;
        left: 0;

        border-radius: 9999px;
        background-color: rgba(vars.$accent, 0.13);

        opacity: 0;
        transform: scaleX(0%);
        pointer-events: none;
    }

    &:hover,
    &:focus-visible {
        outline: 0 solid transparent;

        &:before {
            opacity: 1;
            transform: scaleX(100%);
            transition:
                opacity 0.5s cubic-bezier(0, 1, 0, 1),
                transform 0.5s cubic-bezier(0, 1, 0, 1);
        }
    }
}