/* Get rid of blue outline */
.copy-btn {
    outline: none !important;
}

.copy-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

button.copy-btn {
    border: none;
    background: transparent;
    cursor: pointer;
}

.copy-btn .material-icons {
    font-size: 1rem;
    color: #888;
}

.copy-icon {
    vertical-align: middle;
}

.copy-btn:hover .copy-icon {
    color: #0056b3;
}

.btn-close {
    outline: none !important;
}

/*
 *  Styles to make a <button> element look and act like plain, non-styled text.
 */
.btn-as-text {
    /* Reset all default button styling */
    background: none !important;
    border: none;
    padding: 0;
    margin: 0;

    /* 1. Inherit all font properties, including color, from the parent table cell */
    font: inherit;
    color: inherit;

    /* 2. Remove any text decoration like underlines */
    text-decoration: none !important;

    /* 3. The ONLY indicator of interactivity is the cursor */
    cursor: pointer;

    /* Alignment and focus handling */
    text-align: left;
    outline: none;
    /* Removes the focus ring */
}

/* You can still keep this for accessibility if you want a focus state */
.btn-as-text:focus {
    outline: none;
    box-shadow: none;
}

.btn-as-text:hover {
    color: inherit;         /* DO NOT CHANGE COLOR */
    text-decoration: none;  /* DO NOT ADD UNDERLINE */
}