| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556 |
- @use '~/styles/variables' as var;
- @use '../button-styles';
- .btn-toggle :global {
- @extend %btn-basis;
- left: 12px;
- padding: 0;
- .icon {
- top: 50%;
- right: 0;
- font-size: 22px;
- transform: translateY(-50%);
- }
- }
- // no caret
- .btn-toggle {
- &:global {
- // no caret
- &::after {
- display: none !important;
- }
- }
- }
- // hitarea
- .btn-toggle :global {
- .hitarea {
- inset: 0 -10px 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);
- }
- }
|