<template>
  <q-btn
    no-caps
    :class="[
      'RButton',
      {
        RButton__Action: propIsSet(action),
        RButton__Positive: propIsSet(positive),
        RButton__Negative: propIsSet(negative),
        RButton__Transparent: propIsSet(transparent),
      },
    ]"
    :style="disableStyle"
    v-bind="$props"
    @click="click"
  >
    <template #loading>
      <slot name="loading" />
    </template>
    <slot />
  </q-btn>
</template>

<style lang="scss">
.RButton {
  background: #e5f4fc;
  border: 1px solid #cee3ee;
  color: #107abc;
  font-family: 'Golos UI', serif !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  line-height: 16px !important;
  border-radius: 24px !important;
  & .pgs-icon:first-child {
    margin-right: 8px;
  }
  & .pgs-icon:last-child {
    margin-left: 8px;
  }
  & .pgs-icon:only-child {
    margin: 0px;
  }
  &__Action {
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(92.91deg, #1491CF 0%, #0F68A0 100%);
    box-shadow: 0px 0.6px 1.8px rgba(7, 46, 71, 0.12), 0px 3.2px 8px rgba(7, 46, 71, 0.15);
  }

  &__Positive {
    color: rgba(255, 255, 255, 0.92);
    background: linear-gradient(92.91deg, #04967D 0%, #036b5a 100%);
    border: 1px solid #005748;
    box-shadow: 0px 0.6px 1.8px rgba(7, 46, 71, 0.12), 0px 3.2px 8px rgba(7, 46, 71, 0.15);
  }

  &__Negative {
    color: rgba(255, 255, 255, 0.92);
    background: #cf5f14;
    border: 1px solid #c85509;
    box-shadow: 0px 0.6px 1.8px rgba(7, 46, 71, 0.12), 0px 3.2px 8px rgba(7, 46, 71, 0.15);
  }

  &__Transparent {
    background: transparent;
  }

  .q-btn__wrapper {
    min-height: 32px;
  }
  &.q-btn--round .q-btn__wrapper {
    padding: 0;
    min-width: 32px;
    min-height: 32px;
  }
}
</style>

<script lang="ts" src="./index.ts" />
