button {
    background: transparent;
    border: none;
}

.button-primary {
    position: relative;
    background-color: var(--color-palm-green);
    color: var(--color-sea-salt-white);
    text-transform: uppercase;
    font-family: var(--font-family), sans-serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-light);
    padding: 0.5em 1.2em;
    border: none;
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    letter-spacing: 0.3px;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
    transition:
            background-color 0.2s ease,
            transform 0.6s ease;
}

.button-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -150%;
    width: 300%;
    height: 100%;
    background: linear-gradient(
            120deg,
            rgba(0, 255, 255, 0) 25%,
            rgba(0, 255, 255, 0.15) 50%,
            rgba(0, 255, 255, 0) 75%
    );
    opacity: 0;
    pointer-events: none;
}

.button-primary:hover,
.button-primary:focus {
    transform: scale(1.03);
}

.button-primary:hover::before,
.button-primary:focus::before {
    animation: oceanShimmer 2s linear infinite;
}

.button-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 93, 98, 0.4);
}

.button-primary:active {
    background-color: var(--color-palm-green-hover);
    transform: scale(0.98);
}

.button-primary:disabled,
.button-primary[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.button-outline {
    background-color: transparent;
    color: var(--color-coconut-husk);
    border: 1px solid var(--color-coconut-husk);
    text-transform: uppercase;
    padding: 0.5em 1.2em;
    font-family: var(--font-family), sans-serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    letter-spacing: 0.3px;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    text-shadow: none;
}

.button-outline:hover {
    background-color: var(--color-coconut-husk);
    color: var(--color-sea-salt-white);
    text-shadow: 0 0 1px var(--color-sea-salt-white), 0 0 1px var(--color-sea-salt-white);
    transition: all 0.3s ease;
}

.button-outline:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(47, 93, 98, 0.4);
}

.button-outline:active {
    background-color: var(--color-coconut-husk);
    color: var(--color-sea-salt-white);
    text-shadow: 0 0 1px var(--color-sea-salt-white), 0 0 1px var(--color-sea-salt-white);
}

.button-outline:disabled,
.button-outline[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.button-outline-light {
    background-color: transparent;
    color: var(--color-sea-salt-white);
    border: 1px solid var(--color-sea-salt-white);
    padding: 0.5em 1.2em;
    text-transform: uppercase;
    font-family: var(--font-family), sans-serif;
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.3px;
    line-height: 1.4;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    display: inline-block;
    text-shadow: none;
}

.button-outline-light:hover {
    background-color: var(--color-sea-salt-white);
    color: var(--color-coconut-husk);
    text-shadow: 0 0 1px var(--color-coconut-husk), 0 0 1px var(--color-coconut-husk);
    box-shadow: 0 0 20px 1px rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.button-outline-light:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(248, 248, 245, 0.4);
}

.button-outline-light:active {
    transform: scale(0.98);
}

.button-outline-light:disabled,
.button-outline-light[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}