<template>
    <transition
        name="fade"
        mode="out-in">
        <baseInputButton
            v-bind="$props"
            v-model="selectedValue"
            buttonWrapperClasses="list-group base-input-button list-button rounded-3 d-flex flex-column w-100 label-margin-bottom no-hover">
            <div
                :aria-label="buttonLabel"
                class="button-content list-button-content d-flex flex-column justify-content-center py-3 px-4">
                <div class="row-one">
                    <span
                        id="buttonLabelSpan"
                        class="m-0 button-label-copy"
                        :class="textPosition">{{ buttonLabel }}
                    </span>
                    <span
                        id="buttonLabelSubCopySpan"
                        class="m-0 caption ms-2"
                        :class="textPosition">{{ buttonLabelSubCopy }}
                    </span>
                </div>
                <div class="row-two">
                    <span
                        v-if="buttonBodyCopy"
                        id="buttonBodyCopy"
                        class="m-0 button-label-sub-copy"
                        v-html="buttonBodyCopy"></span>
                </div>
                <span
                    v-if="screenReaderOnlyText"
                    id="screenReaderOnlyTextSpan"
                    class="sr-only">
                    {{ screenReaderOnlyText }}
                </span>
            </div>
        </baseInputButton>
  </transition>
</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: 'tpa-shop-list-button',
    components: {
        baseInputButton
    },
    mixins: [inputButtonWrapperMixin],
};
</script>

<style lang="scss" scoped>
@import "@/styles/ux-variables-svg-strings.scss";

.list-button {
  outline: none;
  input[type="radio"],
  input[type="checkbox"] {
      position: static; //override bootstrap

      &:checked + .list-button-content {
          background: #e7f1f6;
          border: 1px solid #0070d1;
      }
  }
}
.list-button-content {
  color: $gray-600;
  position: relative;
  background: $white;
  transition: all 150ms linear;
  border-radius: $border-radius-lg;
  border: 1px solid $gray-500;
  width: 100%;
  outline: none;

  span {
      &.small {
          font-size: 0.75rem;
          color: $gray-550;
      }
  }
}
.button-content {
  row-gap: 0.25rem;
  color: #4d4e53;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.625rem;

  .row-one {
      display: flex;
      align-items: center;
      line-height: 1.5rem;

      .button-label-copy {
          font-weight: 600;
          line-height: 1.5rem;
          text-transform: capitalize;
      }
      #buttonLabelSubCopySpan {
          font-size: .75rem;
          line-height: 1.5rem;
      }
  }

  .row-two {
      text-align: left;
  }
}
div.col:not(:last-child) >.label-margin-bottom{
    margin-bottom: 1rem;
}
</style>