body {
    background: var(--grey-10);
    color: var(--grey-90);
    margin: initial;
    font: message-box;
    font-size: 13px;
}

@media (prefers-color-scheme: dark) {
    body {
        background: var(--grey-80) !important;
        color: white !important;
    }
    .media-select,
    .receiver:not(:last-child) {
        border-bottom-color: var(--grey-50) !important;
    }
    .receiver__address {
        color: var(--grey-10-a60) !important;
    }
}

.media-select {
    align-items: center;
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    display: flex;
    margin: 0 1em;
    padding: 0.75em 0;
}

.media-select__label-cast,
.media-select__label-to {
    display: inline-block;
}
.media-select__label-cast:not(:empty) {
    margin-inline-end: 0.5em;
}
.media-select__label-to:not(:empty) {
    margin-inline-start: 0.5em;
}

.media-select__dropdown {
    padding-top: 2px;
    padding-bottom: 2px;
}

.receivers {
    list-style: none;
    margin: initial;
    padding: initial;
}

.receivers__not-found {
    align-items: center;
    display: flex;
    height: 50px;
    justify-content: center;
    padding: 0.75em 1em;
}

.receiver {
    column-gap: 0.75em;
    display: grid;
    grid-template-columns: 1fr min-content;
    grid-template-rows: min-content min-content 1fr;
    grid-template-areas:
        "name connect"
        "address connect";
    justify-content: center;
    margin: 0 1em;
    padding: 0.75em 0;
    position: relative;
}

.receiver:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
}

.receiver__name,
.receiver__address {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.receiver__name {
    font-size: 1.1em;
    grid-area: name;
}
.receiver__address {
    color: GrayText;
    grid-area: address;
}
.receiver__status {
    grid-area: status;
}
.receiver__connect {
    align-self: center;
    grid-area: connect;
    justify-self: end;
    min-width: 100px;
    height: 32px;
}
