@import './_variables.scss';

// Base CardLink
.docs-cardLink {
  display: flex;
  text-align: left;
  padding: var(--amplify-space-medium);
  border-radius: var(--amplify-radii-small);
  line-height: var(--amplify-line-heights-small);
  text-decoration: none;
  position: relative;
  transition: all var(--amplify-time-medium) ease;
  &:hover {
    transform: translate3d(0, -2px, 0);
    .docs-cardLink-title {
      text-shadow: 1px 1px var(--amplify-colors-background-primary);
      background-size: 100% var(--amplify-border-widths-medium);
      transition-delay: 0s;
    }
  }
}

.docs-cardLink-icon {
  display: flex;
  flex: 0 0 3.5rem;
  border-radius: var(--amplify-radii-small);
  svg {
    width: 100%;
    height: 100%;
    margin: auto;
  }
}

.docs-cardLink-desc {
  color: var(--amplify-colors-neutral-80);
}

.docs-cardLink-title {
  display: inline;
  font-weight: bold;
  background: linear-gradient(var(--amplify-colors-font-primary) 0 0) 0 100%
    no-repeat;
  background-size: 0% var(--amplify-border-widths-medium);
  transition: background-size 0.5s ease-in-out 0.1s;
}

// Plain (default) variation
.docs-cardLink--plain {
  gap: var(--amplify-space-medium);
  background: var(--amplify-colors-background-secondary);
  box-shadow: var(--amplify-shadows-medium);
  align-items: center;
}

// Branded and Home variations
%docs-cardLink--branded {
  background: var(--amplify-colors-background-primary);
  gap: var(--amplify-space-small);
  align-items: flex-start;
  &:hover {
    box-shadow: var(--amplify-shadows-medium);
  }
  .docs-cardLink-icon {
    padding: var(--amplify-space-medium);
    background: var(--amplify-colors-secondary-10);
    color: var(--amplify-colors-secondary-60);
  }
  .docs-cardLink-desc {
    line-height: var(--amplify-line-heights-medium);
  }
  .docs-cardLink-title {
    font-weight: var(--amplify-font-weights-semibold);
    margin-block-end: var(--amplify-space-xxxs);
  }
  .docs-cardLink-title,
  .docs-cardLink-desc {
    color: var(--amplify-colors-font-primary);
  }
}

.docs-cardLink--branded {
  @extend %docs-cardLink--branded;
  border: var(--amplify-border-widths-small) solid
    var(--amplify-colors-border-secondary);
}

.docs-cardLink--home {
  @extend %docs-cardLink--branded;
  box-shadow: var(--amplify-shadows-medium);
  .docs-cardLink-title {
    font-size: var(--amplify-font-sizes-large);
  }
}

// CardLinkGroup
.docs-cardLinkGroup {
  padding-bottom: var(--amplify-space-large);
}
.docs-cardLinkGroup-title {
  position: relative;
  color: var(--amplify-colors-font-tertiary);
  font-weight: var(--amplify-font-weights-bold);
  font-size: var(--amplify-font-sizes-medium);
  padding-top: var(--amplify-space-large);
  border-top: 1px solid var(--amplify-colors-border-secondary);
  a {
    transform: translate(0, -3px);
    .icon-link {
      font-size: 1.4em;
    }
  }
}
