.eds-c-button {
  cursor: pointer;
  display: inline-block;
  margin: 0;
  position: relative;
  text-decoration: none;
  text-align: center;
  width: 100%;
  font-family: $t-eds-c-button-font-family;
  font-size: $t-eds-c-button-font-size;
  line-height: $t-eds-c-button-line-height;
  padding: $t-eds-c-button-padding-inline $t-eds-c-button-padding-block;
  transition: $t-eds-c-button-transition;
  border-radius: $t-eds-c-button-border-radius;
  font-weight: $t-eds-c-button-font-weight;

  span {
    vertical-align: middle;
  }

  svg {
    vertical-align: middle;
    width: $t-eds-c-button-icon-width;
    height: $t-eds-c-button-icon-height;
  }

  svg:first-child {
    margin-right: $t-eds-c-button-icon-margin;
  }

  svg:last-child {
    margin-left: $t-eds-c-button-icon-margin;
  }
}

@include from-tablet {
  .eds-c-button {
    width: auto;
  }
}

.eds-c-button--primary {
  color:$t-eds-c-button-primary-color;
  background-color: $t-eds-c-button-primary-background-color;
  background-image: $t-eds-c-button-primary-background-image;
  border: $t-eds-c-button-primary-border;
  box-shadow: $t-eds-c-button-primary-box-shadow;
  text-decoration: $t-eds-c-button-primary-text-decoration;

  svg {
    fill: currentColor;
  }

  &:visited {
    color: $t-eds-c-button-primary-visited-color;
  }

  &:hover {
    border: $t-eds-c-button-primary-hover-border;
    box-shadow: $t-eds-c-button-primary-hover-box-shadow;
    text-decoration: $t-eds-c-button-primary-hover-text-decoration;
  }

  &:focus {
    border: $t-eds-c-button-primary-focus-border;
    box-shadow: $t-eds-c-button-primary-focus-box-shadow;
    text-decoration: $t-eds-c-button-primary-focus-text-decoration;
  }

  &:active {
    border: $t-eds-c-button-primary-active-border;
    box-shadow: $t-eds-c-button-primary-active-box-shadow;
    text-decoration: $t-eds-c-button-primary-active-text-decoration;
    color: $t-eds-c-button-primary-active-color;
    background-color: $t-eds-c-button-primary-active-background-color;
  }

  &:hover,
  &:focus {
    color: $t-eds-c-button-primary-hover-color;
    background-color: $t-eds-c-button-primary-hover-background-color;
    background-image: $t-eds-c-button-primary-hover-background-image;

    svg path {
      fill: $t-eds-c-button-primary-hover-color;
    }
  }
}

.eds-c-button--secondary {
  color: $t-eds-c-button-secondary-color;
  background-color: $t-eds-c-button-secondary-background-color;
  background-image: $t-eds-c-button-secondary-background-image;
  border: $t-eds-c-button-secondary-border;
  box-shadow: $t-eds-c-button-secondary-box-shadow;
  text-decoration: $t-eds-c-button-secondary-text-decoration;

  svg {
    fill: currentColor;
  }

  &:visited {
    color: $t-eds-c-button-secondary-visited-color;
  }

  &:hover {
    border: $t-eds-c-button-secondary-hover-border;
    box-shadow: $t-eds-c-button-secondary-hover-box-shadow;
    text-decoration: $t-eds-c-button-secondary-hover-text-decoration;
  }

  &:focus {
    border: $t-eds-c-button-secondary-focus-border;
    box-shadow: $t-eds-c-button-secondary-focus-box-shadow;
    text-decoration: $t-eds-c-button-secondary-focus-text-decoration;
  }

  &:active {
    border: $t-eds-c-button-secondary-active-border;
    box-shadow: $t-eds-c-button-secondary-active-box-shadow;
    text-decoration: $t-eds-c-button-secondary-active-text-decoration;
    color: $t-eds-c-button-secondary-active-color;
    background-color: $t-eds-c-button-secondary-active-background-color;
  }

  &:hover,
  &:focus {
    color: $t-eds-c-button-secondary-hover-color;
    background-color: $t-eds-c-button-secondary-hover-background-color;
    background-image:$t-eds-c-button-secondary-hover-background-image;

    svg path {
      fill: $t-eds-c-button-secondary-hover-color;
    }
  }
}

.eds-c-button--tertiary {
  color: $t-eds-c-button-tertiary-color;
  background-color: $t-eds-c-button-tertiary-background-color;
  background-image: $t-eds-c-button-tertiary-background-image;
  border: $t-eds-c-button-tertiary-border;
  box-shadow: $t-eds-c-button-tertiary-box-shadow;
  text-decoration: $t-eds-c-button-tertiary-text-decoration;
  text-decoration-thickness: $t-a-link-thickness-resting;
  text-underline-offset: $t-a-link-offset-resting;

  span {
    vertical-align: baseline;
  }

  svg {
    fill: currentColor;
  }

  &:visited {
    color: $t-eds-c-button-tertiary-visited-color;
  }

  &:hover {
    border: $t-eds-c-button-tertiary-hover-border;
    box-shadow: $t-eds-c-button-tertiary-hover-box-shadow;
    text-decoration: $t-eds-c-button-tertiary-hover-text-decoration;
    text-decoration-thickness: $t-a-link-thickness-hover;
    text-underline-offset: $t-a-link-offset-hover;
  }

  &:focus {
    border: $t-eds-c-button-tertiary-focus-border;
    box-shadow: $t-eds-c-button-tertiary-focus-box-shadow;
    text-decoration: $t-eds-c-button-tertiary-focus-text-decoration;
  }

  &:active {
    border: $t-eds-c-button-tertiary-active-border;
    box-shadow: $t-eds-c-button-tertiary-active-box-shadow;
    text-decoration: $t-eds-c-button-tertiary-active-text-decoration;
    color: $t-eds-c-button-tertiary-active-color;
    background-color: $t-eds-c-button-tertiary-active-background-color;
  }

  &:hover,
  &:focus {
    color: $t-eds-c-button-tertiary-hover-color;
    background-color: $t-eds-c-button-tertiary-hover-background-color;
    background-image: $t-eds-c-button-tertiary-hover-background-image;

    svg path {
      fill: $t-eds-c-button-tertiary-hover-color;
    }
  }
}

.eds-c-button--small {
  font-size: $t-eds-c-button-small-font-size;
  padding: $t-eds-c-button-small-padding-inline $t-eds-c-button-small-padding-block;

  svg {
    width: $t-eds-c-button-small-icon-width;
    height: $t-eds-c-button-small-icon-height;
  }
}