.not-highlighted {
    user-select: none;
    cursor: default;
}

.copyable {
    display: flex;
    width: fit-content;
}

.copy {
    position: relative;
    margin-left: 4px;
}

.copy::after {
    content: url("data:image/svg+xml,%3Csvg width='26' height='26' viewBox='0 0 26 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 9.5C9 7.29086 10.7909 5.5 13 5.5H20C22.2091 5.5 24 7.29086 24 9.5V20C24 22.2091 22.2091 24 20 24H13C10.7909 24 9 22.2091 9 20V9.5Z' fill='white' stroke='black' stroke-width='3'/%3E%3Cpath d='M2 6C2 3.79086 3.79086 2 6 2H13C15.2091 2 17 3.79086 17 6V16.5C17 18.7091 15.2091 20.5 13 20.5H6C3.79086 20.5 2 18.7091 2 16.5V6Z' fill='white' stroke='black' stroke-width='3'/%3E%3C/svg%3E%0A");

    display: inline-block;
    margin-left: 5px;

    cursor: pointer;
}

.copy::before {
    content: 'Скопировано';
    position: absolute;
    top: -65%;
    left: 115%;
    
    width: auto;
    padding: 5px;
    
    border-radius: 6px;
    background-color: black;
    
    text-align: center;
    visibility: hidden;
    color: #fff;
    
    z-index: 1;
}
  
.copyable.active .copy::before {
    visibility: visible;
}