<template>
    <button @click="handleClick" class="back-button-wrapper" :aria-label="backButtonAccessibleText">
        <svg xmlns="http://www.w3.org/2000/svg" width="34px" height="30px" viewBox="-2.2 -6 30 30">
            <g id="Layer_3">
                <path
                    class="outer"
                    fill="#FFFFFF"
                    d="M19.934-1.434h-8.486c-1.683,0-2.999,0.528-4.021,1.614L1.685,6.146C0.78,7.079,0.338,8.027,0.338,9.041
              c0,1.028,0.444,1.979,1.359,2.908l5.753,5.938c1.054,1.093,2.403,1.647,4.007,1.647l8.475,0.01c2.861,0,4.568-1.692,4.568-4.528
              V3.094C24.5,0.259,22.793-1.434,19.934-1.434L19.934-1.434z" />
            </g>
            <g id="Layer_2">
                <path
                    class="inner"
                    fill="#727676"
                    d="M19.934,17.989c2.041,0,3.066-1.006,3.066-3.028V3.039c0-2.022-1.025-3.028-3.066-3.028h-8.486
          c-1.143,0-2.129,0.292-2.929,1.143L2.766,7.13C2.131,7.784,1.838,8.37,1.838,8.985c0,0.605,0.283,1.201,0.928,1.855l5.762,5.947
          c0.811,0.84,1.787,1.191,2.93,1.191L19.934,17.989z M10.773,13.253c-0.439,0-0.801-0.371-0.801-0.82
          c0-0.215,0.078-0.42,0.235-0.566l2.861-2.861l-2.861-2.862c-0.156-0.156-0.234-0.352-0.234-0.566c0-0.458,0.362-0.801,0.801-0.801
          c0.224,0,0.41,0.069,0.556,0.225l2.881,2.872l2.891-2.881c0.166-0.166,0.353-0.234,0.566-0.234c0.439,0,0.801,0.352,0.801,0.801
          c0,0.225-0.078,0.4-0.234,0.576l-2.871,2.871l2.861,2.852c0.146,0.156,0.234,0.352,0.234,0.576c0,0.449-0.361,0.82-0.811,0.82
          c-0.225,0-0.43-0.098-0.586-0.244l-2.852-2.871l-2.852,2.871C11.203,13.165,10.999,13.253,10.773,13.253z" />
            </g>
        </svg>
    </button>
</template>

<script>
export default {
    name: "buttonBack",
    props: {
        backButtonAccessibleText: {
            type: String,
            required: true,
            default: "",
        },
    },
    methods: {
        handleClick() {
            this.$emit("click-event");
        },
    },
};
</script>

<style lang="scss">
.back-button-wrapper {
    padding: 0;
    position: relative;
    top: -1px;
    margin-left: 2px;
    border: none;
    background: none;

    &:focus {
        outline: none;

        svg .outer {
            fill: $white;
            stroke-width: 2.5px;
            stroke: $blue;
            stroke-linecap: round;
            stroke-linejoin: round;
            transform: translate(-2.7px, -1.8px) scale(1.2);
        }
    }
    &:focus-visible {
        outline: none;
    }
}
</style>
