/* STYLES FOR SHORTCODES IN TABLE COMPONENT */

.wp-block-table th:has(.dynamic-partner-link) {
	white-space: inherit;
}

.wp-block-table thead .dynamic-partner-link {
	color: var(--wp--preset--color--base);
}

.wp-block-table thead .dynamic-partner-link:hover {
	background-color: var(--wp--preset--color--overlay-lighten-opacity-20) !important;
}

.wp-block-table thead .dynamic-partner-link:focus {
	background-color: var(--wp--preset--color--links-focused-orange);
	color: var(--wp--preset--color--secondary);
}

.wp-block-table thead .dynamic-partner-link:focus-visible {
	background-color: var(--wp--preset--color--links-focused-orange);
	color: var(--wp--preset--color--secondary);
	text-underline-offset: 2px;
	border-radius: 2px;
	outline: 0;
}

.wp-block-table thead .dynamic-partner-link:active {
	background-color: var(--wp--preset--color--overlay-lighten-opacity-40);
}

/* STYLES FOR COPY BUTTON AND TOOLTIP IN SHORTCODE */

.copy-clipboard-container.shortcode-clipboard-container {
	white-space: nowrap;
}

.shortcode-clipboard-container .copy-clipboard-btn {
    position: relative;
    display: inline-block;
    cursor: pointer;
    border: 0;
    padding: 18px 8px 6px 17px;
    border-radius: 16px;
    width: 16px;
    height: 16px;
    background-color: var(--wp--preset--color--primary-blue-light-3);
    box-shadow: 0px 1px 2px 0px var(--wp--preset--color--overlay-darken-opacity-6), 0px 1px 3px 0px var(--wp--preset--color--overlay-darken-opacity-10), 0px 0px 4px 0px var(--wp--preset--color--overlay-darken-opacity-8);
    transition: box-shadow 0.2s, background 0.2s;
}

.shortcode-clipboard-container .copy-clipboard-btn::before {
    content: url(../../icons/copy.svg);
    position: absolute;
    left: 50%;
    top: calc(50% + 2px);
    transform: translate(-50%, -50%);
}

.shortcode-clipboard-container .copy-clipboard-btn:hover {
    background: linear-gradient(0deg, var(--wp--preset--color--overlay-darken-opacity-4) 0%, var(--wp--preset--color--overlay-darken-opacity-4) 100%), var(--wp--preset--color--primary-blue-light-3);
    box-shadow: 0px 2px 4px -1px var(--wp--preset--color--overlay-darken-opacity-6), 0px 4px 6px -1px var(--wp--preset--color--overlay-darken-opacity-10), 0px 0px 4px 0px var(--wp--preset--color--overlay-darken-opacity-8);
}

.shortcode-clipboard-container .copy-clipboard-btn:active {
    background: linear-gradient(0deg, var(--wp--preset--color--overlay-darken-opacity-6) 0%, var(--wp--preset--color--overlay-darken-opacity-6) 100%), var(--wp--preset--color--primary-blue-light-3);
    box-shadow: 0px 1px 2px 0px var(--wp--preset--color--overlay-darken-opacity-6), 0px 1px 3px 0px var(--wp--preset--color--overlay-darken-opacity-10), 0px 0px 4px 0px var(--wp--preset--color--overlay-darken-opacity-8);
}

.shortcode-clipboard-container .copy-clipboard-btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--wp--preset--color--accessibility-blue);
    outline: 0;
    box-sizing: border-box;
}

.shortcode-clipboard-container .copy-clipboard-btn-placeholder {
    display: none;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 97px;
    height: 40px;
    background-color: var(--wp--preset--color--tonal-grey-1);
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--custom--line-height--medium);
    color: var(--wp--preset--color--tertiary);
    border-radius: 5px;
    transform: translate(-67px, -46px);
}

.shortcode-clipboard-container .copy-clipboard-btn-placeholder::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background-color: var(--wp--preset--color--tonal-grey-1);
    left: 50%;
    bottom: -5px;
    transform: rotate(45deg);
}

.shortcode-clipboard-container .copy-clipboard-btn-placeholder--last::before {
    left: 75%;
}

.shortcode-clipboard-container .copy-clipboard-btn-placeholder.active {
    display: inline-flex;
}
