@import (reference) "../../styles/less/mixins/_logical-properties.less";
@import (reference) "../../styles/less/ring.less";

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

    & *:focus-visible {
      outline: none;
    }
  }

  .circle-sm {
    width: var(--size-40);
    height: var(--size-40);
  }

  &__title {
    color: var(--color-content-primary);
    font-size: 1rem;
    font-weight: var(--font-weight-semi-bold);
    letter-spacing: 0;
    line-height: var(--line-height-body);
    margin: 0;
  }

  &__body {
    margin-top: var(--size-4);
    color: var(--color-content-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: 1.42857;
  }

  &__sm-media.decision .media-left {
    display: block;
  }

  &__no-media-circle {
    min-width: var(--size-48);
    max-width: var(--size-64);
    display: flex;
    justify-content: center;
  }

  &__no-media-circle > * {
    max-height: 76px;
  }
}

button.np-option {
  background-color: transparent;
  width: 100%;
  .text-align(left);
}

.np-theme-personal {
  // .btn {
  //   max-height: none;
  // }

  .np-option {
    .circle {
      overflow: visible;
    }

    .circle-sm {
      width: var(--size-48);
      height: var(--size-48);
      line-height: var(--size-48);

      @media (--screen-400-zoom) {
        width: var(--size-96);
        height: var(--size-96);
        line-height: var(--size-96);
      }
    }

    &__body {
      margin: var(--size-4) 0 0;
      text-decoration: none;
    }

    &__container-aligned {
      margin-right: calc(-1 * var(--space-content-horizontal));
      margin-left: calc(-1 * var(--space-content-horizontal));
      max-width: none;
      width: auto;
    }

    @media (--screen-sm) {
      & {
        border-radius: var(--radius-small);
      }
    }
  }
  
    .np-option-additional-content {
      margin-left: var(--size-80);
      margin-right: var(--size-16);
      margin-top: -10px;
      padding-bottom: var(--size-16);
      max-width:fit-content;
  }

  @media (max-width: 480px) {
    :not(.np-option__sm-media) > .np-option-additional-content {
      margin-left: var(--size-16);
    }
  }

  @media (--screen-400-zoom) {
    .np-option-additional-content  {
      margin-top: -3px;
    }
  }

}