commons/client/src/components/atoms/Account.module.scss

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

.account {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;

    > div:first-of-type {
        flex: 0 0 80%;
    }
}

.accountId {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: $font-family-monospace;
    font-size: $font-size-small;
    font-weight: 700;
}

.unlock {
    font-size: $font-size-small !important;
    margin-left: $spacer / 2;
}

.accountType {
    width: 100%;
    margin-left: calc(1.5rem + #{$spacer / 3});
    font-size: $font-size-small;
    font-weight: $font-weight-bold;
    color: $brand-grey-light;
}

.toggle {
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    border: none;
    padding: 0;
    cursor: pointer;

    svg {
        display: inline-block;
        fill: currentColor;
        margin-right: $spacer / 8;
        transition: 0.2s ease-out;
    }
}

.open {
    transform: rotate(90deg);
}

.seedphrase {
    margin-top: $spacer / 2;
    margin-left: calc(1.5rem + #{$spacer / 4});
    margin-right: calc(1.5rem + #{$spacer / 4});

    code {
        display: block;
        text-align: center;
        padding: $spacer / 2 $spacer;
        border-radius: $border-radius;
        background: $body-background;
        border: 1px solid $brand-grey-lighter;
        margin-bottom: $spacer / 4;
        word-break: normal;
    }
}

.seedphraseHelp {
    color: $brand-grey-light;
    font-size: $font-size-small;
    margin: 0;
}

.blockies {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    display: inline-block;
    margin-right: $spacer / 3;
    margin-left: 0;
    border: 1px solid $brand-grey-lighter;
}