/*

 CSS allant avec le module Angular ZacKnowMoreModule et le composant <zac-know-more></zac-know-more>
 Gueule de la css a respecter :

  <div class="know_more">
    <button
    class="know_more-title --know_more-icon-left OU ALORS --know_more-icon-right"
  >
    <zac-icon class="know_more-title-icon"></zac-icon>
    <span class="know_more-title-text">{{ getTitle() }}</span>
  </button>
  <div class="know_more-content">
    <ng-content></ng-content>
  </div>
</div>
 */


// custom properties par défaut surchargeable.
:root {

  --dt-know_more-height: 2.5rem;
  --dt-know_more-line-height: 2.5rem;
  --dt-know_more-color: #066db4;
  --dt-know_more-bg-color: transparent;
  --dt-know_more-text-decoration: none;
  --dt-know_more-text-decoration-hover: underline;
  --dt-know_more-icon-margin: 0.5rem;
  --dt-know_more-content-padding: 1rem;

}

.know_more {
  width: fit-content;

  .know_more-title {
    margin: 0;
    padding: 0;
    border: none;
    font-size: inherit;
    font-weight: normal;
    display: flex;
    align-items: center;
    height: var(--dt-know_more-height);
    width: 100%;
    line-height: var(--dt-know_more-line-height);
    color: var(--dt-know_more-color);
    background-color: var(--dt-know_more-bg-color);
    cursor: pointer;

    .know_more-title-text {
      text-decoration: var(--dt-know_more-text-decoration);
    }

    &:hover {
      .know_more-title-text {
        text-decoration: var(--dt-know_more-text-decoration-hover);
      }
    }

    &.--know_more-icon-left {
      flex-direction: row;
      justify-content: flex-start;
      svg {
        margin-right: var(--dt-know_more-icon-margin);
      }
    }

    &.--know_more-icon-right {
      flex-direction: row-reverse;
      justify-content: flex-end;
      svg {
        margin-left: var(--dt-know_more-icon-margin);
      }
    }

  }

  .know_more-content {
    padding: var(--dt-know_more-content-padding);
  }
}