.remove::before,
.keyword-remove::before {
    content: '\00D7';
    font-weight: 500;
}

.keyword-remove:hover,
.remove:hover {
    background: var(--color-error);
    color: var(--color-white);
    border-color: var(--color-error);
    opacity: 1;
    transform: scale(1.1);
}

.remove:hover {
    transform: scale(1.1);
}

.keyword-remove:active,
.remove:active {
    transform: scale(0.95);
}

:is(.keywords-add, .btn-add-keyword, .add-item)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            color-mix(in srgb, var(--color-white) 15%, transparent) 0%,
            transparent 50%,
            color-mix(in srgb, var(--color-white) 5%, transparent) 100%);
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

:is(.keywords-add, .btn-add-keyword, .add-item)::after {
    content: '';
    position: absolute;
    inset: -0.25rem;
    background: radial-gradient(circle, color-mix(in srgb, var(--color-primary) 30%, transparent) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    border-radius: var(--radius-md);
}

:is(.keywords-add, .btn-add-keyword, .add-item):hover:not(.loading) {
    box-shadow: 0 0.0625rem 2rem color-mix(in srgb, var(--color-primary) 35%, transparent);
}

:is(.keywords-add, .btn-add-keyword, .add-item):hover:not(.loading)::before,
:is(.keywords-add, .btn-add-keyword, .add-item):hover:not(.loading)::after {
    opacity: 1;
}

:is(.keywords-add, .btn-add-keyword, .add-item):active {
    transform: translateY(-0.0625rem);
}

:is(#skills.add, #experience.add, #graduation.add, #projects.add, #specialization.add)::before {
    content: '+ ';
    margin-right: 0.375rem;
}

:is(#skills.add, #experience.add, #graduation.add, #projects.add, #specialization.add)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg,
            transparent 0%,
            color-mix(in srgb, var(--color-white) 15%, transparent) 50%,
            transparent 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
}

:is(#skills.add, #experience.add, #graduation.add, #projects.add, #specialization.add):hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--color-primary) 35%, transparent),
        0 0 1.25rem color-mix(in srgb, var(--color-primary) 15%, transparent);
}

:is(#skills.add, #experience.add, #graduation.add, #projects.add, #specialization.add):hover::after {
    opacity: 1;
}

:is(button, input, select, textarea):focus-visible {
    outline: 0.125rem solid var(--color-primary);
    outline-offset: 0.125rem;
}