<template>
  <div class="tab-btn" :class="{ 'tab-btn--active': isActive }">
    <i class="tab-btn__icon" :class="icon" />
    {{ title }}
  </div>
</template>
<script>
export default {
  name: "productTabDesktopTile",
  props: {
    icon: {
      required: true,
      type: String,
    },
    isActive: {
      required: true,
      type: Boolean,
    },
    title: {
      required: true,
      type: String,
    },
  },
};
</script>
<style lang="scss" scoped>
.tab-btn {
  background: $color-white--dark;
  border: 1px solid $color-border;
  color: $color-text--light;
  cursor: pointer;
  display: inline-block;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  padding: 0 $padding-default;
  position: relative;
  right: -1px;
  text-align: center;
  vertical-align: top;
  z-index: 1;

  &__icon {
    display: inline-block;
    font-size: 18px;
    vertical-align: middle;
  }

  &--active {
    background: $color-white;
    border-bottom-color: transparent;
    color: $color-text;
    z-index: 2;
  }
}

[data-lang="en"] {
  .tab-btn {
    left: -1px;
    right: unset;
  }
}
</style>