.aw-island-avatar {
    --island-icon-height: 60px;

    &__icon {
        --ui-avatar-size: var(--island-icon-height);

        display: grid;
    }

    &__icon-userpic {
        @apply text-xl;
        text-align: center;

        grid-column: 1 / -1;
        grid-row: 1 / -1;

        transition: 120ms opacity;

        &:focus:not(:focus-visible) {
            outline: none;
        }

        &:hover,
        &:focus-visible {
            opacity: 0.85;
        }
    }

    &__icon-button {
        display: flex;
        align-items: flex-end;
        justify-content: flex-end;

        width: var(--ui-avatar-size);
        height: var(--ui-avatar-size);

        grid-column: 1 / -1;
        grid-row: 1 / -1;

        z-index: 1;

        span {
            background-color: var(--c-mono-800);

            display: block;
            line-height: 1;
            padding: 4px;
            border-radius: 50%;
            border: 1px solid var(--c-surface);

            svg {
                display: block;
                fill: var(--c-mono-400);
            }
        }
    }

    &__title {
        display: inline-block;
        max-width: 100%;
        line-height: 1.15;
    }

    &__separator {
         margin: var(--card-padding-y) 0 0;
    }

    &--empty .aw-island__content {
        padding: 0;
    }
}