@use 'design-system' as *;

.clipboardButtonOuter {
    --clipboard-button-bg: var(--color-code-background);
    --clipboard-button-fg: var(--color-fg-tertiary);

    display: flex;
    align-items: center;
    position: absolute;
    top: $spacing-size-1;
    right: $spacing-size-1;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.33s ease-in-out;

    pre:hover &,
    &.hasCopied {
        opacity: 1;
    }

    &:hover {
        --clipboard-button-fg: var(--color-util-brand-400);

        #{$selector-darkmode} & {
            --clipboard-button-fg: var(--color-link-hover);
        }
    }

    &.hasCopied {
        --clipboard-button-bg: var(--color-util-gray-700);
        --clipboard-button-fg: var(--color-fg-white);

        #{$selector-darkmode} & {
            --clipboard-button-fg: var(--color-bg-primary);
        }
    }

    // Account for likely scrollbar in example runners
    :global(.example-runner-outer) & {
        right: $spacing-size-5;
    }
}

.clipboardButton,
.clipboardButtonCopied {
    display: flex;
    align-items: center;
    height: $spacing-size-8;
    background-color: var(--clipboard-button-bg);
    border-top: 1px solid var(--color-border-primary);
    border-bottom: 1px solid var(--color-border-primary);
}

.clipboardButton {
    width: calc(#{$spacing-size-8} - var(--radius-sm));
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
    border-right: 1px solid var(--color-border-primary);
    cursor: pointer;
    transition: background-color $transition-default-timing;

    svg {
        --icon-size: 22px;
        --icon-color: var(--clipboard-button-fg);

        transition: fill $transition-default-timing;
    }
}

.clipboardButtonCopiedOuter {
    overflow: hidden;
}

.clipboardButtonCopied {
    font-size: var(--text-fs-sm);
    font-weight: var(--text-semibold);
    padding-left: $spacing-size-2;
    padding-right: $spacing-size-2;
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
    border-left: 1px solid var(--color-border-primary);
    font-weight: var(--text-regular);
    color: var(--clipboard-button-fg);
    transition:
        background-color $transition-default-timing,
        color $transition-default-timing;
    cursor: pointer;
}
