@use "sass:map";

/*
---
name: ghost()
category:
  - core/mixin
---
### Ghost button helper

### scss
```scss
//
// @param  hash  $params
//   border-size  length
//   color        hex
//

@use "node_modules/sass-basis/src/css/core";

.c-ghost-btn {
  @include core.btn();
  @include core.ghost((
    border-size: 1px,
    color: #fff,
  ));
  padding: var(--_padding1) var(--_padding2);
}
```

### html
```ejs
<a class="c-ghost-btn" role="button">btn</a>
```
*/

@mixin ghost($params: ()) {
  $params: map.merge(
    (
      'border-size' : 1px,
      'color'       : var(--_color-white),
    ),
    $params
  );

  background-color: transparent !important;
  border: map.get($params, 'border-size') transparent;

  @each $color in map.get($params, 'color') {
    border-color: $color;
    color: $color;
  }
}