@use "sass:map" as sass-map;
@use "../../../styles/tools/generate";
@use "./config";

/// Applies base social button styles
@mixin base() {
  border: 2px solid var(--color-border-contrast);
  border-radius: 100%;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  vertical-align: baseline;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 0;
}

/// Applies size to social button
@mixin size($config: config.$size) {
  @include generate.css-map($config);
}

/// Applies color variant based on social media type
@mixin color($name, $colors: config.$social-colors) {
  $variant: sass-map.get($colors, $name);

  @include generate.css-map($variant, "default");

  @media (hover: hover) {
    &:hover {
      @include generate.css-map($variant, "hover");
    }
  }

  &:active,
  &.is-active {
    @include generate.css-map($variant, "pressed");
  }
}