:host {
  --link-color: var(--dc-primary-colour);
  --link-visited-color: var(--dc-primary-link-visited-color);
  --link-font-size: 18px;
  --link-height: 24px;
}

.dc-link {
  font-family: var(--dc-font-family);
  font-style: normal;
  font-weight: 500;
  display: inline-flex;
  flex-wrap: wrap;
  text-align: center;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: center;
  color: var(--link-color);
  font-size: var(--link-font-size);
  line-height: var(--link-height);
  letter-spacing: -0.5px;
  outline: none;
}

/* Animation */
.dc-link::before {
  content: " ";
  position: absolute;
  transform: scaleX(0);
  width: 100%;
  height: 1px;
  left: 0;
  bottom: 0;
  cursor: pointer;
  transition: transform 0.25s ease-out;
  background-color: var(--dc-primary-accent-colour);
  transform-origin: bottom left;
  outline: none;
}

/* Icon */
.dc-link-icon path {
  fill: var(--link-color);
}

.dc-link-icon {
  display: flex;
  height: 16px;
  width: 16px;
  align-self: center;
}

.dc-link-image-right {
  display: inline-flex;
  flex-direction: row-reverse;
}

.dc-link-image-left {
  display: inline-flex;
  align-items: baseline;
}

.dc-link-image-left .dc-link-icon {
  padding-right: 4px;
}

.dc-link-image-right .dc-link-icon {
  padding-left: 4px;
}

/* Visited state style */
.dc-link:visited {
  color: var(--link-visited-color);
}

.dc-link:visited .dc-link-icon path {
  fill: var(--link-visited-color);
}

/* Focus style */
.dc-link:focus-visible {
  border-bottom: 3px solid var(--dc-primary-colour);
  outline: none;
}

.dc-link:focus-visible::before,
.dc-link-disabled::before {
  visibility: hidden;
}

/* Inline variant */
.dc-link-inline {
  --link-font-size: 16px;
  --link-height: 22px;
}

/* Footer and stacked variant */
.dc-link-footer {
  --link-font-size: 14px;
  --link-height: 18px;
}

.dc-link-stacked,
.dc-link-footer {
  --link-color: var(--dc-primary-text-color);
}

.dc-link-footer .dc-link-icon {
  height: 14px;
  width: 14px;
}

.dc-link-stacked .dc-link-icon path,
.dc-link-footer .dc-link-icon path {
  fill: var(--dc-primary-text-color);
}

/* Hover state style */
.dc-link:hover {
  color: var(--dc-primary-accent-colour);
}

.dc-link:hover::before {
  transform: scaleX(1);
  background: var(--dc-primary-accent-colour);
}

.dc-link-stacked:hover,
.dc-link-footer:hover {
  color: var(--dc-primary-text-color);
}

/* Correct Style render with hover state */
.dc-link-stacked::before,
.dc-link-footer::before,
.dc-link-stacked:hover::before,
.dc-link-footer:hover::before {
  background-color: var(--dc-primary-text-color);
}

.dc-link:hover .dc-link-icon path {
  fill: var(--dc-primary-accent-colour);
}

.dc-link-footer:hover .dc-link-icon path,
.dc-link-stacked:hover .dc-link-icon path {
  fill: color-mix(in oklch, transparent, var(--dc-primary-text-color) 90%);
}

/* Disabled state styles */
.dc-link-disabled {
  color: var(--dc-primary-disabled-colour);
  cursor: not-allowed;
}

.dc-link-disabled .dc-link-icon path {
  fill: var(--dc-primary-disabled-colour);
}

.dc-link-disabled:hover {
  color: var(--dc-primary-disabled-colour);
}

.dc-link-disabled:hover .dc-link-icon path {
  fill: var(--dc-primary-disabled-colour);
}