button {   
    background-color: transparent;
    border: 1px solid transparent;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem; /* Controls spacing between icon and text cleanly */
    padding: 8px 14px;
    font-size: 0.875rem;
    cursor: pointer;
    /* box-sizing: border-box;
    pointer-events: bounding-box; */ 

    & span {
        display: inline-block;
        transform: translateY(-0.5px);
    }

    &.btn-icon {
        padding: 2px;
    }
}

button,
[tabindex="0"] {
    &:focus {
        outline: none;
        border: 1px solid var(--color-focus-border);
        box-shadow: 0 0 3px 1.5px var(--color-focus-box-shadow);
        z-index: 1;
    }

    &:hover:not(:has(.custom-element[data-hovered])) {
        border: 1px solid var(--color-hover-border);
        box-shadow: 0 0 3px 1.5px var(--color-hover-box-shadow);
        z-index: 1;
    }


    &:active {
        background-color: var(--color-active-background);
    }
}

button.text-button {
    /* align-self: flex-start; */
    border: 1px solid transparent;
    padding: 0;
    color: var(--color-primary);
    text-decoration: underline;

    &:hover, &:focus {
        border: none;
        box-shadow: none;
    }
}

.finder-results-content button,
button[slot="footer"] {
    padding-top: 4px;
    padding-bottom: 4px;
}