.buttons {
    display: flex;
    flex-wrap: wrap;
    margin: -15px;
}

.buttons.align-left {
    justify-content: flex-start;
}
.buttons.align-center {
    justify-content: center;
}
.buttons.align-right {
    justify-content: flex-end;
}

.button {
    background: transparent;
    display: inline-block;
    position: relative;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    border: none;
    cursor: pointer;
    line-height: initial;
}

.button > span {
    display: block;
    width: inherit;
    text-decoration: none;
    border-radius: 25px;

    border: 2px solid var(--color-white);
    background-color: var(--color-white);
    color: var(--color-primary);
    padding: 0 5px;
}

.button.button-small > span {
    padding: 1px 8px 0 8px;
    margin-left: -8px;
    margin-top: -3px;
}

.button:not(.button-small) > span {
    padding: 15px 30px;
    font-weight: 600;
}

.button > span:first-of-type {
    position: absolute;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);

    clip-path: polygon(-150% 0%, 0% 0%, -50% 100%, -150% 100%);
    transition: all 250ms ease-in-out;
}

.primary .button > span:first-of-type {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
}

/* seperate rules on purpose */
input:checked + .button > span:first-of-type {
    clip-path: polygon(0% 0%, 150% 0%, 100% 100%, 0% 100%);
}
.button.active > span:first-of-type {
    clip-path: polygon(0% 0%, 150% 0%, 100% 100%, 0% 100%);
}
.button:hover > span:first-of-type {
    clip-path: polygon(0% 0%, 150% 0%, 100% 100%, 0% 100%);
}

input:checked + .button > span:last-of-type{
    transition-delay: 300ms;
    visibility: hidden;
}
.button.active > span:last-of-type{
    transition-delay: 300ms;
    visibility: hidden;
}
.button:hover > span:last-of-type {
    transition-delay: 300ms;
    visibility: hidden;
}

.button-border > span {
    border-color: var(--color-primary);
}

.primary .button-border > span {
    border-color: var(--color-white);
    background-color: var(--color-primary);
    color: var(--color-white);
}

.primary .button-border > span:first-of-type {
    background-color: var(--color-secondary);
    border-color: var(--color-white);
}

.buttons > .button {
    margin: 15px;
}

a {
    color: inherit;
    text-decoration: none;
}

p > a {
    color: var(--color-secondary);
}

a:not(.button) > span {
    transition: color 200ms ease-in-out;
    display: inline-block;
    position: relative;
}

a:not(.button) > span:after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    bottom: 50%;
    transform: translate(-50%, 0.5em);
    width: 0%;
    border-bottom: 1px solid var(--color-primary);
    opacity: 0;

    transition:
        width 800ms ease-out,
        opacity 400ms ease-out
    ;
}

.primary a:not(.button) > span:after {
    border-color: var(--color-white);
}
p > a:not(.button) > span:after{
    border-color: var(--color-secondary);
}
.primary p > a:not(.button) > span:after {
    border-color: var(--color-secondary);
}

a:not(.button).active > span:after {
    width: 100%;
    opacity: 1;

    transition:
        width 250ms cubic-bezier(0.5, 0.25, 0.5, 1.5),
        opacity 300ms ease-out
    ;
}
a:not(.button):hover > span:after {
    width: 100%;
    opacity: 1;

    transition:
        width 250ms cubic-bezier(0.5, 0.25, 0.5, 1.5),
        opacity 300ms ease-out
    ;
}