@use 'styles/variables' as var;
@use '../button-styles';

.btn-create {
  @extend %btn-basis;

  // centering
  :global(.icon) {
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}

// pointer-events
.btn-create {
  pointer-events: none;

  :global(svg .background) {
    pointer-events: fill;
  }

  :global(.hexagon-main),
  :global(.pencil-icon) {
    transition: transform 0.2s ease-in-out;
    transform-origin: 22.5px 22px;
  }
}

// == Colors
.btn-create {
  background-color: transparent !important;
}

.btn-create {
  :global(svg) {
    fill: var(--bs-btn-bg);
  }
}

.btn-create:hover {
  :global(svg) {
    fill: var(--bs-btn-hover-bg);
    transform: scale(1.1);
  }
}

.btn-create:active {
  :global(svg) {
    fill: var(--bs-btn-active-bg);
    transform: scale(1.1);
  }
}