@import "../color/color.scss";
@import "../size/size.scss";


@mixin panel($bg, $bg-shadow, $radius, $padding) {
    display:inline-block;
    background: $bg;
    box-shadow: $bg-shadow;
    border-radius: $radius;
    padding: $padding
}

@mixin panel-avater($border, $bg) {
    display: inline-block;
    border: $border;
    border-radius: 50%;
    background: $bg;
    text-align: center;
    overflow: hidden;
}
@mixin panel-image($bg, $bg-shadow, $radius, $padding) {
    display: inline-block;
    position: relative;
    overflow: hidden;
    line-height: inherit;
    text-align: center;
    font-size: 0px;
    background: $bg;
    box-shadow: $bg-shadow;
    border-radius: $radius;
    padding: $padding;
}

@mixin panel-img {
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    // object-fit: cover;
    vertical-align: middle;
    transition: transform 1s, -webkit-transform 1s;
}

// 图片动画
@mixin panelAnt {
    cursor: pointer;
    &:hover {
        img {
            transform: scale(1.15);
        }
    }
    &.x:hover {
        img {
            transform: scaleX(1.15);
        }
    }
    &.y:hover {
        img {
            transform: scaleY(1.15);
        }
    }
}