@use "sass:map";

@use "../../di-inline";
@use "../../variables/units";

@use "button.mixins" as button-mixins;

@mixin _shared-icon($icon, $colors) {
  &::after {
    @include di-inline.base($icon, map.get($colors, "default"));
  }

  @if map.has-key($colors, "hover") {
    &:hover {
      &::after {
        @include di-inline.variant($icon, map.get($colors, "hover"));
      }
    }
  }

  @if map.has-key($colors, "disabled") {
    &[disabled] {
      &::after {
        @include di-inline.variant($icon, map.get($colors, "disabled"));
      }
    }
  }
}

@mixin _tertiary-icon($icon) {
  $property: --_dso-button-tertiary-#{$icon}-icon;

  &::after {
    @include di-inline.base($icon, "grasgroen", $override-property: $property);
  }

  &[disabled] {
    &::after {
      @include di-inline.variant($icon, "grasgroen-40");
    }
  }

  &:not([disabled]) {
    &:hover,
    &:active {
      &::after {
        @include di-inline.variant($icon, "bosgroen", $override-property: $property);
      }
    }
  }
}

@mixin _shared($download-colors, $extern-colors) {
  &.download {
    @include _shared-icon("download", $download-colors);
  }

  &.extern {
    @include _shared-icon("external-link", $extern-colors);
  }
}

button {
  @include button-mixins.element();
}

a,
button,
label {
  &.dso-primary {
    @include button-mixins.primary($base-styling: true);
    @include _shared(
      (
        "default": "wit",
      ),
      (
        "default": "wit",
      )
    );
  }

  &.dso-secondary {
    @include button-mixins.secondary($base-styling: true);
    @include _shared(
      (
        "default": "grasgroen",
        "hover": "bosgroen",
        "disabled": "grasgroen-40",
      ),
      (
        "default": "grasgroen",
        "hover": "bosgroen",
        "disabled": "grasgroen-40",
      )
    );
  }

  &.dso-tertiary {
    @include button-mixins.tertiary($base-styling: true);

    &.extern,
    &.download {
      &::after {
        position: relative;
        inset-block-start: -2px;
      }
    }

    &.download {
      @include _tertiary-icon("download");
    }

    &.extern {
      @include _tertiary-icon("external-link");
    }
  }

  &.dso-map {
    @include button-mixins.map();
  }
}

a {
  &.dso-primary {
    @include button-mixins.anchor-primary();
  }

  &.dso-secondary {
    @include button-mixins.anchor-secondary();
  }

  &.dso-tertiary {
    @include button-mixins.anchor-tertiary();
  }
}

.dso-primary,
.dso-secondary,
.dso-tertiary {
  + .dso-primary,
  + .dso-secondary,
  + .dso-tertiary {
    margin-block-start: var(--_dso-button-after-button-margin-block-start, 0);
    margin-inline-start: var(--_dso-button-after-button-margin-inline-start, units.$u2);
  }
}