@import '../shared-styles/index';

:host {
  background: v(card-background-color);
  border-color: v(card-border-color);
  border-width: v(card-border-width);
  border-style: solid;
  border-radius: v(card-border-radius);
  box-shadow: none;
  display: inline-block;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;

  .nx-card-inner {
    padding: nx-spacer(m) - nx-border-size(xs);
  }

  &:hover,
  &:focus {
    outline: none;
  }

  &.is-clickable {
    position: relative;
  }

  &.is-clickable:not(.is-disabled) {
    &:hover {
      background-color: v(clickable-card-hover-background-color);
      border-color: v(clickable-card-hover-border-color);
    }
    &:active {
      background-color: v(clickable-card-active-background-color);
      border-color: v(clickable-card-active-border-color);
    }

    &:focus-within:has(.nx-card-main-link:focus) {
      @include focus-style;
    }
  }

  &.is-disabled {
    border-color: v(clickable-card-disabled-border-color);
    pointer-events: none;
  }

  ::ng-deep {
    .nx-card-main-link {
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        content: ' ';
      }
    }

    .nx-card-secondary-info {
      position: relative;
      z-index: 2;
    }
  }
}

:host.cdk-keyboard-focused {
  @include focus-style;
}

.nx-card-highlight {
  padding: 0 nx-spacer(m) - nx-border-size(xs);
  border-radius: v(selectable-card-border-radius) v(selectable-card-border-radius) 0 0;
  background: v(card-highlight-background-color);
  color: v(card-highlight-text-color);
  line-height: nx-line-height(xs);
  font-size: nx-font-size(4xs);
  text-align: center;
}

.is-expert .nx-card-highlight {
  text-align: left;
}
