@use './fastTagsFunctions';
@use './colors' as *;

@mixin insertCircleDotCheckboxTags($outer-size: 16) {
  flex: none;
  width: #{$outer-size}px;
  height: #{$outer-size}px;

  @include fastTagsFunctions.centerInsideContent();

  border-radius: #{$outer-size/2}px;
  background-color: $white;
  border: solid 1px $gray-300;

  transition: all linear 200ms;

  &:hover {
    background-color: $media-50;
    border: solid 1px $media-300;
  }

  &.disable {
    background-color: $gray-100;
    border: solid 1px $gray-300;

    &:hover {
      background-color: $gray-100;
      border: solid 1px $gray-300;
    }
  }
}

@mixin insertCircleDotCheckboxActiveTags($inner-size: 6) {
  background-color: $media-50;
  border: solid 1px $media-400;

  &:before {
    content: '';

    width: #{$inner-size}px;
    height: #{$inner-size}px;

    border-radius: #{$inner-size/2}px;
    background-color: $media-500;
  }

  &:hover {
    background-color: $media-100;
    border: solid 1px $media-500;
  }

  &.disable {
    background-color: $gray-100;
    border: solid 1px $gray-300;

    &:hover {
    background-color: $gray-100;
    border: solid 1px $gray-300;
    }

    &:before {
      background-color: $gray-300;
    }
  }
}