.Button-arrow{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    cursor: pointer;
    background: transparent;
    border:none;
    &:hover, &:focus{
        svg{
            fill: var(--wp--preset--color--black);
            transition: fill .200s ease;
        }
    }
    svg{
        fill: var(--wp--preset--color--primary);
        transition: fill .200s ease;
    }
}

.Buttons-arrowWrap{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--wp--preset--spacing--xl);
}

.Button-arrowLeft{
    position: relative;
    &::after{
        content: "";
        position: absolute;
        left:40px;
        display: block;
        height: 29px;
        width: 1px;
        background-color: var(--wp--preset--color--black);
        margin-left:var(--wp--preset--spacing--s);

    }
}

.Button-arrowRight{
    transform: rotate(180deg);
}

.Button-secondary{
    background: var(--wp--preset--color--tertiary);
    border-radius: var(--wp--custom--radius--full);
    padding: var(--wp--preset--spacing--s) var(--wp--preset--spacing--l);
    color: var(--wp--preset--color--white);
    font-family: var(--wp--preset--font-family--secondary);
    text-decoration:none;
    font-weight: var(--wp--preset--font-weight--regular);
    font-size:14px;
    &:hover, &:focus{
        background: var(--wp--preset--color--black);
        color: var(--wp--preset--color--white);
    }
}

.Button-tertiary {
    color: var(--wp--preset--color--black);
    font-family: var(--wp--preset--font-family--secondary);
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-color: var(--wp--preset--color--primary);
    &:hover, &:focus{
        color: var(--wp--preset--color--primary);
    }
}