<template>
    <div :class="bem()">
        <div
            v-if="$slots.tip"
            :class="bem('tip')">
            <!-- 右侧提示插槽位 -->
            <slot name="tip"/>
        </div>
        <!-- 默认插槽位 -->
        <slot/>
    </div>
</template>

<script>
import { componentMixin, createComponentName } from '../_utils/component';

export default {
    name: createComponentName('quick-link-item'),
    mixins: [componentMixin],
};
</script>

<style lang="less">
@import '../_styles/base.less';

.border {
    border-width: @border-width-base;
    border-style: @border-style-base;
    border-color: #ddd;
}

.@{quick-link-item} {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 60px;
    width: 60px;
    background-color: @color-white;
    cursor: pointer;
    color: @color-font;
    box-sizing: border-box;
    font-size: @font-size-xsm;
    .border();

    & + .@{quick-link-item} {
        border-top: none;
    }

    svg {
        font-size: 24px;
        color: inherit;
        fill: currentColor;
    }

    span {
        // padding-top: .25em;
        display: block;
        white-space: nowrap;
        color: inherit;
    }

    &:hover {
        background-color: @color-primary;
        color: @color-white;

        .@{quick-link-item}__tip {
            display: block;
        }
    }

    &__tip {
        position: absolute;
        display: none;
        overflow: hidden;
        cursor: default;
        transform: translate(-100%, 0);
        top: 0;
        left: 1px;
        box-sizing: border-box;
        background: #fff;
        .border();
    }
}

</style>
