<template> <div> <div v-show="expanded" class="expand-button expanded noselect" @click="$emit('expand', false)" ><Icon icon="arrow-up3" /></div> <div v-show="!expanded" class="expand-button noselect" @click="$emit('expand', true)" ><Icon icon="arrow-down3" /></div> </div> </template> <script> export default { props: { expanded: { type: Boolean, default: false, }, }, }; </script> <style lang="scss" scoped> .expand-button { width: 100%; display: flex; align-items: center; justify-content: center; padding: .5rem; .icon { fill: var(--lighten); } &:hover { cursor: pointer; background: var(--lighten-hint); .icon { fill: var(--text-light); } } } .expand-dark { .icon { fill: var(--darken-weak); } &:hover { background: var(--darken-hint); .icon { fill: var(--darken); } } } </style>