borgwarehouse/Components/Repo/QuickCommands/QuickCommands.module.css

.container {
    display: flex;
    align-items: center;
    align-self: flex-start;
    margin: auto 47px auto auto;
}

.icons {
    position: relative;
    bottom: 14px;
}

.quickSetting {
    position: absolute;
    visibility: visible;
    opacity: 1;
}

.tooltip {
    visibility: hidden;
    opacity: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #6d4aff21;
    background-color: #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset;
    color: #65748b;
    font-size: 0.95rem;
    padding: 5px 5px;
    transition: 0.5s opacity;
}

.copyButton {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    border: none;
    background-color: none;
}

.copyValid {
    margin: auto 8px auto auto;
    font-size: 0.95rem;
    color: #6d4aff;
    animation: scale-in-center 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes scale-in-center {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}

/* On Hover */

.container:hover .tooltip {
    visibility: visible;
    opacity: 1;
    width: 100%;
    height: 100%;
    border: 1px solid #6d4aff21;
    background-color: #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.1) inset;
    color: #65748b;
    font-size: 0.95rem;
    padding: 5px 5px;
    transition: 0.5s opacity;
}

.container:hover .copyButton {
    position: absolute;
    visibility: visible;
    opacity: 1;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.container:hover .quickSetting {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

@media all and (max-width: 1000px) {
    .container {
        display: none;
    }
}