@use '../../../../styles';

.account-card {
    position: relative;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(
            239.75deg,
            rgba(255, 255, 255, 0) 26.52%,
            rgba(255, 255, 255, 0.12) 100%
    );
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.24);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    border-radius: 6px;
    height: 188px;
    max-width: 320px;

    .account-card__info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 20px;
        max-width: 100%;
        flex: 0 0 auto;
        overflow: hidden;

        .account-card__info-details {
            font-weight: 400;
            font-size: 14px;
            line-height: 20px;
            letter-spacing: 0.6px;

            .account-card__info-details-name {
                @include styles.ellipsis;
                max-width: 220px;
                font-weight: 700;
                font-size: 16px;
                line-height: 20px;
                letter-spacing: 0.25px;
                color: #fff;
                margin-bottom: 8px;
            }

            .account-card__info-details-public-key {
                color: #c5e4f3;
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 2px;
                user-select: none;
                max-width: 220px;

                .account-card__info-details-public-key-value {
                    @include styles.ellipsis;
                    cursor: pointer;
                    color: rgba(#fff, .48);

                    &:active {
                        cursor: copy;
                    }
                }
            }
        }

        .account-card__info-balance {
            @include styles.ellipsis;
            font-style: normal;
            font-weight: bold;
            font-size: 20px;
            line-height: 24px;
            color: #fff;
            white-space: nowrap;
        }
    }

    .account-card__pattern {
        flex: 0 1 auto;
        width: 94px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        overflow: hidden;
    }

    .account-card__menu {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 1;

        .dropdown-menu__dropdown {
            top: 40px;
        }
    }
}
