<template>
  <baseInputButton
      v-bind="$props"
      v-model="selectedValue"
      :buttonWrapperClasses="[
          'list-group list-button-horizontal d-flex flex-column w-100 base-input-button no-hover',
      ]">
      <div
          class="button-content list-button-horizontal-content d-flex flex-column justify-content-center">
          <span
            class="m-0"
            :class="textPosition">
              {{ buttonLabel }}
          </span>
          <span
            v-if="buttonLabelSubCopy"
            class="m-0 small"
            :class="textPosition">
              {{ buttonLabelSubCopy }}
          </span>
          <span
            v-if="screenReaderOnlyText"
            class="sr-only">
              {{ screenReaderOnlyText }}
          </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';

export default {
    name: 'list-button-horizontal',
    components: {
        baseInputButton
    },
    mixins: [inputButtonWrapperMixin]
};
</script>

<style lang="scss" scoped>
.list-button-horizontal {
    .list-button-horizontal-content {
        padding: 0.625rem;
        border: $border-input;
        height: 2.875rem;
        outline: none;
        position: relative;
        background: $white;
        transition: all 150ms linear;
        width: 100%;
        color: $gray-600;

        span {
            font-weight: 400;
            color: $darker-gray;
        }
    }

    &.selected {
        input + .list-button-horizontal-content {
            box-shadow: none;
            border: 1px solid $heritage-blue-primary;
            background: $blue-100;
            span {
                color: $black;
                font-weight: 600;
            }
        }
    }

    &:focus-within {
        input +.list-button-horizontal-content {
            box-shadow: none;
            border: 2.5px solid $heritage-blue-primary;
        }
    }

    &.has-error {
        input + .list-button-horizontal-content {
            border-color: $red;
        }
    }

    &.has-success {
        input + .list-button-horizontal-content {
            border-color: $success;
        }
    }
}
.col:first-of-type {
    .list-button-horizontal-content {
        border-bottom-left-radius: $border-radius-list-button;
        border-top-left-radius: $border-radius-list-button;
        border-right-width: 0;
    }
}
.col:last-of-type {
    .list-button-horizontal-content {
        border-bottom-right-radius: $border-radius-list-button;
        border-top-right-radius: $border-radius-list-button;
    }
}
</style>
