@use "../helpers/breakpoints";

@use "../palette";

@use "text";
@use "proxima-nova";

@mixin button-standard {
  display: inline-block;
  margin: 32px auto 0 0;

  @include text.body-s;

  @include breakpoints.breakpoint(mobile) {
    margin-top: 24px;
  }
}

@mixin anchor-standard {
  display: inline-block;
  margin: 32px auto 0 0;

  @include text.body-s;

  @include breakpoints.breakpoint(mobile) {
    margin-top: 24px;
  }
}

@mixin button-primary-icon {
  display: block;

  position: absolute;

  top: 15px;
  left: 15px;

  width: 24px;
  height: 24px;

  @include breakpoints.breakpoint(mobile) {
    width: 22px;
    height: 22px;
  }
}

@mixin button-primary-action {
  outline-offset: 2px;

  @include text.body-s;

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    @include proxima-nova.proxima-nova-bold;
  }

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    position: relative;

    display: block;
    text-align: center;

    color: palette.$white;
    background-color: palette.$action-standard;

    border: 2px solid palette.$action-standard;
    border-radius: 4px;

    padding: 8px 16px;
  }

  &[disabled] {
    background-color: palette.$action-disabled;

    border: 2px solid palette.$action-disabled;
  }

  span {
    display: block;
  }

  &:hover {
    text-decoration: underline;
  }

  &:focus {
    color: palette.$standard;
    background-color: palette.$outline;

    border: 2px solid palette.$outline;

    text-decoration: underline;
    outline-color: palette.$standard;
  }
}

@mixin button-secondary-icon {
  display: block;

  position: absolute;

  top: 15px;
  left: 15px;

  width: 24px;
  height: 24px;

  @include breakpoints.breakpoint(mobile) {
    width: 22px;
    height: 22px;
  }
}

@mixin button-secondary-action {
  outline-offset: 2px;

  @include text.body-s;

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    @include proxima-nova.proxima-nova-bold;
  }

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    position: relative;

    display: block;
    text-align: center;

    color: palette.$action-standard;
    background-color: transparent;

    border: 2px solid palette.$action-standard;
    border-radius: 4px;

    padding: 8px 16px;
  }

  &[disabled] {
    background-color: palette.$action-disabled;

    border: 2px solid palette.$action-disabled;
  }

  span {
    display: block;
  }

  &:hover {
    text-decoration: underline;
    color: palette.$action-standard;
  }

  &:focus {
    background-color: palette.$action-standard;
    color: palette.$white;

    text-decoration: underline;
    outline-color: palette.$outline;
  }
}

@mixin anchor-primary-icon {
  display: block;

  position: absolute;

  top: 15px;
  left: 15px;

  width: 24px;
  height: 24px;

  @include breakpoints.breakpoint(mobile) {
    width: 22px;
    height: 22px;
  }
}

@mixin anchor-primary-action {
  outline-offset: 2px;
  outline-width: 1px;
  outline-style: auto;

  @include text.body-s;

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    @include proxima-nova.proxima-nova-bold;
  }

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    position: relative;

    display: block;
    text-align: center;

    color: palette.$white;
    background-color: palette.$action-standard;

    border: 2px solid palette.$action-standard;
    border-radius: 4px;

    padding: 8px 16px;
  }

  &.disabled {
    background-color: palette.$action-disabled;

    border: 2px solid palette.$action-disabled;
  }

  span {
    display: block;
  }

  &:link {
    text-decoration: none;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      color: palette.$white;
    }
  }

  &:hover {
    text-decoration: underline;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      color: palette.$white;
    }
  }

  &:visited {
    color: palette.$white;
  }

  &:focus,
  &:active {
    background-color: palette.$white;
    color: palette.$action-standard;
  }

  &:focus {
    text-decoration: underline;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      outline-color: palette.$link-outline;
    }
  }
}

@mixin anchor-secondary-icon {
  display: block;

  position: absolute;

  top: 15px;
  left: 15px;

  width: 24px;
  height: 24px;

  @include breakpoints.breakpoint(mobile) {
    width: 22px;
    height: 22px;
  }
}

@mixin anchor-secondary-action {
  outline-offset: 2px;
  outline-width: 1px;
  outline-style: auto;

  @include text.body-s;

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    @include proxima-nova.proxima-nova-bold;
  }

  // stylelint-disable-next-line no-duplicate-selectors
  & {
    position: relative;

    display: block;
    text-align: center;

    color: palette.$action-standard;
    background-color: transparent;

    border: 2px solid palette.$action-standard;
    border-radius: 4px;

    padding: 8px 16px;
  }

  &.disabled {
    background-color: palette.$action-disabled;

    border: 2px solid palette.$action-disabled;
  }

  span {
    display: block;
  }

  &:link {
    text-decoration: none;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      color: palette.$action-standard;
    }
  }

  &:hover {
    text-decoration: underline;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      color: palette.$action-standard;
    }
  }

  &:visited {
    color: palette.$action-standard;
  }

  &:focus,
  &:active {
    background-color: palette.$action-standard;
    color: palette.$white;
  }

  &:focus {
    text-decoration: underline;

    // stylelint-disable-next-line no-duplicate-selectors
    & {
      outline-color: palette.$link-outline;
    }
  }
}

@mixin button-primary {
  @include button-standard;

  button {
    @include button-primary-action;
  }
}

@mixin button-secondary {
  @include button-standard;

  button {
    @include button-secondary-action;
  }
}

@mixin anchor-primary {
  @include anchor-standard;

  a {
    @include anchor-primary-action;
  }
}

@mixin anchor-secondary {
  @include anchor-standard;

  a {
    @include anchor-secondary-action;
  }
}

%button-primary {
  @include button-primary;
}

%button-secondary {
  @include button-secondary;
}

%anchor-primary {
  @include anchor-primary;
}

%anchor-secondary {
  @include anchor-secondary;
}