<template>
    <baseInputButton
        v-bind="$props"
        v-model="selectedValue"
        buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 mb-2">
        <div
            :aria-label="buttonLabel"
            class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
            <span
                class="m-0 position-relative"
                :class="textPosition">
                <img :src="buttonLabel" />
                <span class="calendar-text">{{ value }}</span>
            </span>
        </div>
    </baseInputButton>
</template>
<script>
import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin.js';

export default {
    name: 'calendar-modal-list-button',
    components: {
        baseInputButton
    },
    mixins: [inputButtonWrapperMixin]
};
</script>
<style lang="scss" scoped>
.list-button {
    outline: none;
    input[type="radio"],
    input[type="checkbox"] {
        position: static; //override bootstrap

        &:focus-visible + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:focus + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:checked + .list-button-content {
            color: $black;
            font-weight: 500;
            background: $blue-100;
            box-shadow: 0 0 0 1px $blue;
        }
        &:checked:focus + .list-button-content {
            box-shadow: 0 0 0 2.5px $blue;
        }
        &:checked + .list-button-content p,
        &:checked + .list-button-content span {
            font-weight: 500;
        }
        &:checked + .list-button-content span:nth-child(2) {
            font-weight: 400;
            color: $gray-600;
        }
    }
}
.list-button-content {
    color: $gray-600;
    position: relative;
    background: $white;
    transition: all 150ms linear;
    border-radius: $border-radius-lg;
    border: 0.063rem solid $gray-500;
    width: 100%;
    outline: none;

    span.calendar-text {
        margin-left: 0.313rem;
        padding: 0.125rem 0.5rem;
    }
}

.position-relative {
    position: relative;
}
</style>
