@use "sass:map";

@use "../../di";
@use "../../variables/units";
@use "../../variables/colors";

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

@mixin _shared-icon($default-di, $hover-di, $disabled-di) {
  &::after {
    @include di.base($default-di);
  }

  @if ($hover-di) {
    &:hover {
      &::after {
        @include di.variant($hover-di);
      }
    }
  }

  @if ($disabled-di) {
    &[disabled] {
      &::after {
        @include di.variant($disabled-di);
      }
    }
  }
}

@mixin _tertiary-icon($default-di, $disabled-di, $hover-active-di) {
  &::after {
    @include di.base($default-di);
  }

  &[disabled] {
    &::after {
      @include di.variant($disabled-di);
    }
  }

  &:not([disabled]) {
    &:hover,
    &:active {
      &::after {
        @include di.variant($hover-active-di);
      }
    }
  }
}

@mixin _shared($download-map, $extern-map) {
  &.download {
    @include _shared-icon(
      map.get($download-map, "default"),
      map.get($download-map, "hover"),
      map.get($download-map, "disabled")
    );
  }

  &.extern {
    @include _shared-icon(
      map.get($extern-map, "default"),
      map.get($extern-map, "hover"),
      map.get($extern-map, "disabled")
    );
  }
}

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

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

  &.dso-secondary {
    @include button-mixins.secondary($base-styling: true);
    @include _shared(
      (
        "default": "download",
        "hover": "download-bosgroen",
        "disabled": "download-grasgroen-40",
      ),
      (
        "default": "external-link",
        "hover": "external-link-bosgroen",
        "disabled": "external-link-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", "download-grasgroen-40", "download-bosgroen");
    }

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

  &.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(--_dt-button-after-button-margin-block-start, 0);
    margin-inline-start: var(--_dt-button-after-button-margin-inline-start, units.$u2);
  }
}