@import '../../../styles/variables';

$popoverWidth: 18rem;

.popover {
    position: relative;
    width: $popoverWidth;
    padding: $spacer / 2;
    background: $brand-black;
    border-radius: 0.1rem;
    border: 0.1rem solid $brand-grey-light;
    box-shadow: 0 6px 16px 0 rgba($brand-black, 0.3);
    color: $brand-grey-light;
    font-size: $font-size-small;
    animation: showPopup 0.2s ease-in forwards;
    white-space: initial;
    text-align: left;
}

@keyframes showPopup {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.popoverInfoline {
    border-bottom: 0.05rem solid $brand-grey;
    padding: $spacer / 3 0;

    &:first-child {
        padding-top: 0;
    }

    &:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    button {
        svg,
        &[data-action] {
            display: none;
        }
    }
}

.balance {
    font-size: $font-size-small;
    margin-left: $spacer / 2;
    white-space: nowrap;

    strong {
        color: $brand-grey-lighter;
    }

    &:first-child {
        margin-left: 0;
    }
}