<template>
  <transition name="fade">
    <div v-if="isOpen" class="fl-modal-rules">
      <div class="fl-modal-rules-one">
        <div class="fl-modal-rules-one__show">
          <div class="square fl-modal-rules-one__square">
            <fl-icon
                name="arrow"
                :width="9"
                :height="16"
                class="fl-modal-rules-arrow"
            />
          </div>
        </div>
        <div class="fl-modal-rules-one__description">Зажмите ЛКМ, чтобы выделить несколько объектов</div>
      </div>
      <div class="fl-modal-rules-two">
        <div class="fl-modal-rules-two__show">
          <div class="square fl-modal-rules-two__square">
            Ctrl
          </div>
          <fl-icon
              name="plus"
              class="fl-modal-rules-plus"
          />
          <fl-icon
              name="arrow"
              :width="9"
              :height="16"
              class="fl-modal-rules-arrow"
          />
        </div>
        <div class="fl-modal-rules-two__description">С зажатым Ctrl можно убрать выделенные объекты</div>
      </div>
      <div
          class="fl-modal-rules-close"
          @click="$emit('close')"
      >
        <div class="fl-modal-rules-close__line"></div>
      </div>
    </div>
  </transition>
</template>

<script>
import FlIcon from '@/core-components/icon/FlIcon'
export default {
  name: 'FlModalRules',
  components: { FlIcon },
  props: {
    isOpen: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
  $background-color: #2E3039;
  $radius: 2px;

  .fl-modal-rules {
    position: fixed;
    bottom: 32px;
    left: 50%;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    margin-left: auto;
    padding: 16px;
    color: $light-01;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: -0.2px;
    background-color: $background-color;
    border-radius: $border-radius;
    box-shadow: 0 4px 12px rgba($black-01, 0.15);
    transform: translateX(-50%);
  }

  .fl-modal-rules-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 24px;
    height: 24px;
    background-color: $background-color;
    border: 1px solid $grey-04;
    border-radius: 100%;
    cursor: pointer;

    @include flex-center;
  }

  .fl-modal-rules-close__line {
    box-sizing: border-box;
    width: 14px;
    border: 2px solid #F5F6F7;
    border-radius: $border-radius;
  }

  .square {
    position: relative;
    background-color: $grey-02;
    border: 1px dashed $grey-04;
    border-radius: $radius;
  }

  .fl-modal-rules-one__square {
    width: 24px;
    height: 24px;
  }

  .fl-modal-rules-two__square {
    width: 44px;
    height: 32px;
    @include flex-center;
  }

  .fl-modal-rules-plus {
    margin: 0 12px 0 8px;
  }

  .fl-modal-rules-arrow,
  .fl-modal-rules-plus {
    fill: $grey-03
  }

  .fl-modal-rules-one__square .fl-modal-rules-arrow {
    position: absolute;
    right: -8px;
    bottom: -9px;
  }

  .fl-modal-rules-one {
    margin-right: 24px;
  }

  .fl-modal-rules-one__show {
    margin-right: 16px;
  }

  .fl-modal-rules-two__show {
    margin-right: 12px;
  }

  .fl-modal-rules-one__show,
  .fl-modal-rules-two__show,
  .fl-modal-rules-two,
  .fl-modal-rules-one {
    display: flex;
    align-items: center;
  }

  .fl-modal-rules-one__description,
  .fl-modal-rules-two__description {
    max-width: 200px;
  }

  .fade-enter-active, .fade-leave-active {
    transition: opacity 0.4s;
  }

  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  @include media-max-lg {
    .fl-modal-rules-two__description,
    .fl-modal-rules-one__description {
      max-width: initial;
    }
  }

  @include media-max-md {
    .fl-modal-rules {
      flex-direction: column;
      width: 80%;
    }

    .fl-modal-rules-one {
      margin-right: initial;
      margin-bottom: 20px;
    }
  }
</style>
