.required {
    color: red;
}

.text-center {
    text-align: center;
}


.btn {
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.5rem 1rem;
}

.btn-primary {
    background-color: var(--color-strong-surface);
    border: none;
    color: var(--color-on-strong);
}

.link {
    color: var(--color-text);
    font-size: 1.25rem;
    position: relative;
}

.link:focus {
    outline: none;
}

.link::after {
    background-color: var(--color-text);
    position: absolute;
    content: "";
    height: 2px;
    bottom: -2px;
    left: 0;
    width: 0;
    transition: width var(--transition-duration) ease-in-out;
}

.link:hover::after,
.link:focus::after {
    width: 100%;
}

.link-underline {
    color: var(--color-text);
    text-decoration: underline;
}

.link-underline:focus-visible {
    border-radius: 2px;
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 4px;
}

.text-light {
    color: var(--color-on-strong);
}

.text-dark {
    color: var(--color-text);
}

.btn:hover,
.btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: 4px;
}