@import (reference) "../variables/neptune-tokens.less";
@import (reference) "./core/_typography.less";
@import (reference) "./ring.less";

.decision {
  cursor: pointer;
  margin-bottom: 0 !important;
  border: 0;
  align-items: center;
  transition: background-color ease 350ms;
  background-color: transparent;
  display: block;

  &:not(.np-option):focus-visible,
  &:not(.np-option):has(:focus-visible) {
    .ring();
    .ring-offset-0();
  }

  &__title {
    .np-text-title-body();
  }

  &__content {
    .np-text-body-default;

    margin-top: var(--size-4);
  }

  + .decision {
    margin-top: -1px;
  }

  dd:last-child {
    margin-bottom: 0;
  }

  dl {
    margin-top: var(--size-8);
  }

  .media,
  &.media {
    width: 100%;
    padding: var(--size-16) var(--size-12);

    .np-theme-personal & {
      padding: var(--size-16);
    }

    .media-left {
      display: none;
    }

    .media-body {
      color: var(--color-content-secondary);
    }

    @media (--screen-xs) {
      .media-left {
        display: block;
      }
    }
  }

  &:not(.disabled):hover {
    // TODO: Replace this color on rebrand.
    // Custom hover color added to distinct decision hover color from product page backgrounds.
    background-color: #86a7bd12;

    .circle-inverse {
      background-color: var(--color-background-screen);

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

    .tw-checkbox-button,
    .tw-radio-button {
      border-color: var(--color-interactive-accent);

      .np-theme-personal & {
        border-color: transparent;
      }
    }
  }

  &.decision-complex {
    align-items: initial;
  }

  .np-theme-personal & {
    &:not(.disabled):hover {
      background-color: var(--color-background-screen-hover);
    }
  }
}