@import (reference) "./../styles/less/core/_typography.less";

.np-tile {
  min-width: 120px;
  border-radius: var(--radius-small);
  width: 100%;

  .np-theme-personal & {
    background-color: var(--color-background-neutral);

    .tw-avatar .tw-avatar__content {
      background-color: var(--color-contrast);
    }
  }

  &.decision {
    margin-top: 0;
    border: 1px solid var(--color-border-neutral);

    .np-theme-personal & {
      border: none;

      &:hover {
        background-color: var(--color-background-neutral-hover);
      }

      &:active {
        background-color: var(--color-background-neutral-active);
      }

      .np-text-body-default {
        color: var(--color-content-secondary);
      }
    }
  }

  &.np-decision__tile--fixed-width {
    width: 300px;
  }

  &__media {
    width: 100%;
  }

  &__description {
    color: var(--color-content-secondary);
    margin-top: var(--size-12);
    display: inline-block;
  }

  &--small {
    &.np-decision__tile--fixed-width {
      width: 260px;
    }

    .np-tile__description {
      margin-top: var(--size-4);
    }
  }

  &:hover {
    .tw-avatar {
      pointer-events: none;

      .tw-avatar__content {
        background-color: var(--color-background-screen);
      }
    }
  }
}

.np-tile__description {
  color: var(--color-content-secondary);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-body);
  margin-top: var(--size-12);
}