/// ----------------------------------------------------------------------

/// Tag

/// ----------------------------------------------------------------------

@use '@lavalogic/scss-lib' as lib;
@use 'spacing';
@use 'typography';
@use 'colours';
@use 'states';
@use 'corners';

/// -------------------
/// Tag config
/// -------------------

$padding-y: spacing.$xxs !default;
$padding-x: spacing.$xs !default;

/// -------------------
/// Tag selectors
/// -------------------

.tag:not(.token) {
  @include lib.resets-style;
  display: inline-flex;
  box-sizing: border-box;
  vertical-align: middle;
  padding: $padding-y $padding-x;
  align-items: center;
  line-height: typography.$base-line-height;
  font-family: typography.$font-family;
  font-size: map-get(typography.$small, 'font-size');
  border-radius: corners.$round;
  border: solid 1px colours.$brand-one;
  cursor: pointer;
  white-space: nowrap;

  &:focus {
    @include states.focus;
  }
}

/// -------------------
/// Tag action
/// -------------------

.tag__action.btn {
  border-width: 1px;
}
