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

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

  left: 14px;
  padding: 0;

  :global(.icon) {
    top: 50%;
    right: 0;
    font-size: 22px;
    transform: translateY(-50%);
  }
}

// no caret
.btn-toggle {
  & {

    // no caret
    &::after {
      display: none !important;
    }
  }
}

// hitarea
.btn-toggle {
  :global(.hitarea) {
    inset: 0 -14px 0 0;
  }
}

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

.btn-toggle {
  :global(svg) {
    fill: var(--grw-primary-400);
  }
}

.btn-toggle:hover {
  :global(svg) {
    fill: var(--grw-primary-400);
  }
}

.btn-toggle:active {
  :global(svg) {
    fill: var(--grw-primary-600);
  }
}