@import '../../styles/mixins';

$avatarHeight: 32px;

.avatar {
    height: $avatarHeight;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0 30px 0 9px;
    border: 1px solid transparent;
    z-index: 2;

    &:hover {
        background: var(--ds-color-hover-area);
    }

    &_drag {
        opacity: 0.5;
    }

    &_over {
        border: 1px solid var(--g-color-line-generic);
    }

    &_active {
        position: relative;
        flex: 0 0 240px;
        width: 240px;
        height: 32px;
        border-radius: 4px;
        background: var(--ds-color-avatar);
        margin-bottom: 12px;

        &:hover {
            background: var(--ds-color-avatar);
            border: 1px solid var(--g-color-line-generic);
        }
    }

    &_source {
        background: var(--ds-color-avatar);

        &:hover {
            background: var(--ds-color-avatar);
        }
    }

    &_drag_disabled {
        cursor: auto;
    }

    &__icon-avatar {
        margin-right: 8px;
        flex-shrink: 0;
    }

    &__avatar-title {
        flex-grow: 1;
        @include overflow-ellipsis;
    }

    &__btn-edit {
        display: flex;
        width: 24px;
        height: 24px;
        justify-content: center;

        &-icon {
            height: inherit;
            display: flex;
            align-items: center;
            left: 10px;
            position: relative;
        }
    }

    &__btn-delete-avatar {
        width: 24px;
        height: 24px;

        &.g-button {
            position: absolute;
            right: 2px;

            &:hover {
                cursor: pointer;
            }
        }
    }

    &__replace-source-area {
        width: 24px;
        height: 24px;
        position: absolute;
        right: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--g-color-base-brand);
        border: 1px dashed var(--g-color-base-brand);
        border-radius: 4px;

        &_over {
            width: $avatarHeight;
            height: $avatarHeight;
            right: 0;
            color: var(--g-color-base-background);
            background: var(--g-color-base-brand);
        }
    }
}
