<script setup lang="ts">
const props = defineProps({
    selected: Boolean,
});
</script>
<template>
    <div class="tab" :class="{ selected: props.selected }">
        <slot />
    </div>
</template>

<style scoped>
.tab {
    background-color: var(--color-brand-ul-medium-grey);
    border: none;
    font-weight: bold;

    border: 1px solid #000000;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: none;
    background: lightgray;
    box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

.tab.selected {
    background-color: var(--color-brand-ul-red);
}

.vertical-tabs .tab {
    width: 100%;
    padding: 1rem;
    text-align: right;
}

.vertical-tabs .tab:not(:last-child) {
    margin-bottom: 0.3rem;
}
</style>
