<template>
  <button class="btn_class" :class="class_bt">
    <slot></slot>
  </button>
</template>

<script>

export default {
  name: 'my-button',
  props:{
      class_bt:{type:String,
          default:'btn_primary'
      }
   },




}
</script>

<style scoped>
/* Стилизация кнопки */


.btn_class{

    display: flex;
    justify-content: center;
    align-items: center;
    //min-width: 80px;
    box-sizing: border-box;
    appearance: none;
    border: 1px solid ;
    border-radius: 8px;
    padding: 5px 10px 5px 10px;
    color: #2a2a2a;
    line-height: 1;
    cursor: pointer;

}

button[disabled]{
    opacity: 0.5;
    cursor: default;
    pointer-events: none;
}



.btn_primary_2{
    /* Blue */
    background: var(--background-green);
    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}
.btn_primary_2:hover {
    background: var(--background-green-hover);
}



.btn_primary{
    /* Blue */
   /* background: var(--background-button-primary);*/
  background: var(--white);
    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
    color: var(--grey-color);
}
.btn_primary:hover {
    background: var(--grey-4);
}
.btn_primary:focus {

    outline: none;
    box-shadow: 0 0 0 4px #cbd6ee;
}



.btn_secondary{
    background: var(--purple);
    transition: opacity 200ms ease-in-out, background 200ms ease-in-out;
}
.btn_secondary:hover {
    background: var(--secondary-hover-color);
}
.btn_secondary:focus {
    outline: none;
    box-shadow: 0 0 0 4px #cbd6ee;
}



.btn_alternate{

    border: 1px solid var(--grey-3);
    color: var(--grey-4);
    background: var(--white);
    transition: border 200ms ease-in-out, background 200ms ease-in-out;
}

.btn_alternate:hover {
    border: 1px solid #212429;
}
.btn_alternate:focus {
    outline: none;
    box-shadow: 0 0 0 4px #cbd6ee;
}
.btn_alternate[disabled]{
    border: 1px solid var(--grey-3);
}


</style>