/*
 * Linkcard component
 */
@use 'sass:map';
@use '../abstracts/variables';
@use '../abstracts/mixins/breakpoints' as *;
@use '../abstracts/' as *;

$-module-name: 'pkt-linkcard';

pkt-linkcard {
  display: block;
}

// Spacing
$-linkcard-spacing: map.get(variables.$spacing, 'size-16');
$-linkcard-spacing-big: map.get(variables.$spacing, 'size-24');

.#{$-module-name} {
  display: grid;
  grid-template-columns: min-content auto;
  grid-template-rows: auto auto;
  column-gap: 8px;
  row-gap: 4px;
  align-items: center;
  padding: $-linkcard-spacing;
  text-decoration: none;
  width: 100%;
  height: 100%;
  transition: background-color 0.2s linear;

  @include bp('laptop-up') {
    padding: $-linkcard-spacing-big;
  }

  &:hover {
    text-decoration: none;
  }

  &:hover .pkt-linkcard__title {
    text-decoration: underline;
  }

  &:hover .pkt-link--external {
    &::after {
      filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
        contrast(90%);
    }
  }

  &__title {
    grid-column: 2;
    @include get-text('pkt-txt-20-medium');

    & > p {
      margin: 0;
    }

    @include bp('phablet-up') {
      @include get-text('pkt-txt-24-medium');
    }

    &.pkt-link--external {
      display: inline-flex;
      &::after {
        height: 2.25rem;
        width: 1.5rem;
        background-size: 1.5rem 1.5rem;
        background-position: center;
        margin-left: 0.5rem;
        flex: 0 0 auto;
        align-self: flex-start;
      }
    }
  }

  > .pkt-icon.pkt-link__icon,
  pkt-icon.pkt-link__icon {
    margin-right: 0;
  }

  &__text {
    grid-column: 2;
    p:first-of-type {
      margin-top: 0;
    }

    p:last-of-type {
      margin-bottom: 0;
    }
  }

  // Modifiers

  &--beige {
    background-color: var(--pkt-color-surface-default-light-beige) !important;
    color: var(--pkt-color-text-body-dark) !important;

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--pkt-color-brand-warm-blue-1000) !important;
    }
  }

  &--blue {
    background-color: var(--pkt-color-surface-subtle-pale-blue) !important;
    color: var(--pkt-color-text-body-dark) !important;

    &:hover {
      background-color: var(--pkt-color-surface-default-light-blue) !important;
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--pkt-color-brand-warm-blue-1000) !important;
    }
  }
  &--grey,
  &--gray {
    background-color: var(--pkt-color-surface-default-gray) !important;
    color: var(--pkt-color-text-body-dark) !important;

    &:hover {
      background-color: var(--pkt-color-surface-strong-gray) !important;
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--pkt-color-brand-warm-blue-1000) !important;
    }
  }

  &--green {
    background-color: var(--pkt-color-surface-default-faded-green) !important;
    color: var(--pkt-color-text-body-dark) !important;

    &:hover {
      background-color: var(--pkt-color-surface-strong-light-green) !important;
    }

    &:hover,
    &:focus,
    &:focus-visible,
    &:active {
      color: var(--pkt-color-brand-warm-blue-1000) !important;
    }
  }
  &--grey-outline,
  &--gray-outline {
    border: 4px solid var(--pkt-color-border-subtle) !important;
  }

  &--beige-outline {
    border: 4px solid var(--pkt-color-border-light-beige) !important;
  }
}

@at-root [data-mode='dark'] .#{$-module-name} {
  .pkt-link--external::after {
    // white
    filter: brightness(0) saturate(100%) invert(99%) sepia(0%) saturate(2190%) hue-rotate(285deg) brightness(109%)
      contrast(100%);
  }

  &:hover .pkt-link--external::after {
    // --pkt-color-brand-blue-500
    filter: brightness(0) saturate(100%) invert(93%) sepia(91%) saturate(6664%) hue-rotate(169deg) brightness(103%)
      contrast(107%);
  }
}

@at-root [data-mode='dark'] .#{$-module-name}--beige,
  .#{$-module-name}--blue {
  .pkt-link--external::after {
    // #2A2859
    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%)
      contrast(95%) !important;
  }

  .pkt-link--external:hover::after {
    // --pkt-color-brand-blue-500
    filter: brightness(0) saturate(100%) invert(14%) sepia(64%) saturate(913%) hue-rotate(210deg) brightness(91%)
      contrast(95%) !important;
  }
}