a {
  color: theme-color("red");
  text-decoration: underline;

  &:hover,
  &:active,
  &:focus {
    color: theme-color("red");
    text-decoration: none;
    outline: 0;
  }
}

.link {
  &-primary {
    padding: $link-primary-padding;
    margin: $link-primary-padding 0;
    display: inline-block;
    border: solid 1px;
    text-align: center;
    text-decoration: none;
    color: theme-color("charcoal");
    border-color: theme-color("charcoal");

    &:hover,
    &:focus {
      padding-bottom: 1 + ($link-primary-padding - $link-border-bottom-width);
      border-bottom-width: $link-border-bottom-width;
      text-decoration: none;
      color: inherit;
    }
  }

  &-secondary,
  &--external {
    &:after {
      font-family: $brand-font-family-icons;
      display: inline-block;
      margin-left: 10px;
      margin-top: 3px;
    }
  }

  &-secondary {
    @include font-size($font-small-mobile);
    color: theme-color("charcoal");
    text-decoration: none;

    &:after {
      position: absolute;
      content: $link-secondary-icon;
    }

    &:focus,
    &:hover {
      text-decoration: none;
      border-bottom: solid 1px;
    }

    @include tablet {
      @include font-size($font-small);
    }
  }

  &--external {
    &:after {
      content: $link-external-icon;
    }
  }
}

.section--red,
.section--blue,
.section--purple,
.section--charcoal {
  a,
  a:active,
  a:visited,
  .link-primary {
    color: color("white");
    border-color: color("white");
  }
}

.section--yellow,
.section--pink,
.section--green {
  a,
  a:active,
  a:visited,
  .link-primary {
    color: theme-color("charcoal");
    border-color: theme-color("charcoal");
  }
}

.red-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("red");
  }

  .link-primary {
    border-color: theme-color("red");
    color: theme-color("red");
  }
}

.green-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("green");
  }

  .link-primary {
    border-color: theme-color("green");
    color: theme-color("green");
  }
}

.blue-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("blue");
  }

  .link-primary {
    border-color: theme-color("blue");
    color: theme-color("blue");
  }
}

.purple-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("purple");
  }

  .link-primary {
    border-color: theme-color("purple");
    color: theme-color("purple");
  }
}

.pink-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("pink");
  }

  .link-primary {
    border-color: theme-color("pink");
    color: theme-color("pink");
  }
}

.yellow-theme {
  a,
  a:active,
  a:visited {
    color: theme-color("yellow");
  }

  .link-primary {
    color: theme-color("yellow");
    border-color: theme-color("yellow");
  }
}

.red-theme,
.blue-theme,
.pink-theme,
.yellow-theme,
.purple-theme,
.green-theme {
  .red-theme {
    .link-primary {
      border-color: theme-color("red");
      color: theme-color("red");
    }
    a {
      color: theme-color("red");
    }
  }
  .blue-theme {
    .link-primary {
      border-color: theme-color("blue");
      color: theme-color("blue");
    }
    a {
      color: theme-color("blue");
    }
  }
  .pink-theme {
    .link-primary {
      border-color: theme-color("pink");
      color: theme-color("pink");
    }
    a {
      color: theme-color("pink");
    }
  }
  .yellow-theme {
    .link-primary {
      border-color: theme-color("yellow");
      color: theme-color("yellow");
    }
    a {
      color: theme-color("yellow");
    }
  }
  .purple-theme {
    .link-primary {
      border-color: theme-color("purple");
      color: theme-color("purple");
    }
    a {
      color: theme-color("purple");
    }
  }
  .green-theme {
    .link-primary {
      border-color: theme-color("green");
      color: theme-color("green");
    }
    a {
      color: theme-color("green");
    }
  }

  .section--yellow,
  .section--pink,
  .section--green {
    a,
    a:active,
    a:visited,
    .link-primary {
      color: theme-color("charcoal");
      border-color: theme-color("charcoal");
    }
  }

  .section--red,
  .section--blue,
  .section--purple,
  .section--charcoal {
    a,
    a:active,
    a:visited,
    .link-primary {
      color: color("white");
      border-color: color("white");
    }
  }
}