@import '../color/color.scss';
@import '../mixin/panel';

// 定义变量
$panel-prefix-cls: lion-panel;

$bg-shadow: 2px 3px 14px rgba(0, 0, 0, 0.1);
$panel-radius: 4px;
$panel-padding: 10px;
$panel-img-padding: 10px;
$avater-border: 1px solid $gray-common;
$avater-bg: #ccc;

.#{$panel-prefix-cls} {
    @include panel($white ,$bg-shadow, $panel-radius, $panel-padding)
}

// 头像面板
.#{$panel-prefix-cls}-avater {
    @include panel-avater(none, $avater-bg);
    >img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
    .avater-con {
        >span{
            display: inline-block;
            color: white;
        }
        i.iconfont {
            color: white;
            font-size: inherit;
        }
    }
}

// 方形头像面板
.#{$panel-prefix-cls}-avater-squ {
    @include panel-avater(none, $avater-bg);
    border-radius: $panel-radius !important;
}

// image
.#{$panel-prefix-cls}-image {
    @include panel-image($panel-bg, none, 0, $panel-img-padding);
    img {
        cursor: pointer;
        @include panel-img;
    }
}

.#{$panel-prefix-cls}-img-animation {
    @include panelAnt;
}