@use "../globals/" as *;
@use "../util/" as *;

.btn-icon {
  font-size: inherit;
  flex: 0 0 auto;
  padding: 8px;
  line-height: 1;
  text-align: center;
  border-radius: $border-radius-pill;
  cursor: pointer;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
}

.btn-icon-alt {
  font-size: inherit;
  flex: 0 0 auto;
  border: 1px solid transparent;
  padding: 8px;
  line-height: 1;
  text-align: center;
  border-radius: $border-radius-pill;
  cursor: pointer;
  background-color: transparent;
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  &:hover {
    background-color: rgba(0, 0, 0, 0.075);
  }
  &:focus-visible,
  &.focus {
    outline: 0;
    background-color: var(--bg-core-primary-light);
    box-shadow: 0 0 0 0.15rem var(--bg-core-primary-lighten);
  }
  &:active,
  &.active {
    color: #fff;
    background-color: var(--bg-core-primary);
  }
}

@each $key, $val in $theme-colors {
  .btn-icon-alt.#{$key} {
    background-color: transparent;
    color: $val;
    &:hover {
      //background-color: lighten($val, 24);
      background-color: rgba($val, 0.1);
    }
    &:focus-visible,
    &.focus {
      outline: 0;
      color: set-color($val);
      background-color: rgba($val, 0.5);
      box-shadow: 0 0 0 0.15rem lighten($val, 20);
    }
    &:active,
    &.active {
      color: set-color($val);
      background-color: $val;
    }
  } 
}


