/* 
* styles for show inside of texteditor (ckeditor)
*
*/

@import './styles/functions';
@import './styles/variables';
@import './styles/mixins/breakpoints';
@import './styles/mixins/buttons';
@import './styles/mixins/font-face';
@import './styles/mixins/typography';
@import './styles/theme/buttons';
@import './styles/theme/typography';

* {
  box-sizing: inherit;
  margin-block-end: 1rem;

  &:last-child {
    margin-bottom: 0 !important;
  }
}

ul,
ol {
  position: relative;
  padding-left: 24px;
  padding-top: 0.2rem;
  list-style: none;
  @include text-base;
  @include text;

  li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin: 0;

    &:first-child {
      padding-top: 0.25rem;
    }

    &:last-child {
      padding-bottom: 0;
    }
  } 

  li {
    &::before {
      position: absolute;
      display: flex;
      content: '';
      left: 0;
      width: 20px;
      height: 20px;
      font-size: 1rem;
      line-height: 100%;
      justify-content: center;
      align-items: center;
    }
  }
}

ul {
  &:not(.list-check, .list-uncheck) {
    li {
      /* &::before {
        content: '•';
      } */
      @include icon-left('@/Images/icons/sub-alt.svg', 21px);
    }
  }

  &.list-check {
    li {
      @include icon-left('@/Images/icons/check.svg', 16px);
      &::before {
        margin-top: 5px
      }
    }
  }

  &.list-uncheck {
    li {
      @include icon-left('@/Images/icons/close.svg', 16px);
      &::before {
        margin-top: 5px
      }
    }
  }

  /* &.list-chevron {
    li {
      @include icon-left('@/Images/icons/chevron-right.svg', 12px);
      &::before {
        margin-top: 5px;
        margin-left: 5px;
      }
    }
  } */

  &.list-extended {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    justify-content: center;
    align-items: center;
    gap: 12px;

    li {
      display: contents;
      @include icon-left('@/Images/icons/minus.svg', 12px);
      &::before {
        position: relative;
      }

      &:first-child {
        &::before {
          display: none;
        }
      }
    }
  }
}

ol {
  counter-reset: li;

  li {
    counter-increment: li;

    &::before {
      content: counter(li) '.';
      font-size: 0.8rem;
      font-weight: $font-weight-bold;
      height: 30px
    }
  }

  
  &.list-style,
  &.list-check,
  &.list-uncheck {
    padding-left: $spacing-xl;

    li {
      padding: $spacing-smd 0;
      border-bottom: 1px solid $color-black20;
      margin: 0;

      &::before {
        content: counter(li);
        width: 32px;
        height: 32px;
        margin-top: -6px;
        background-color: $color-accent;
        border-radius: 100%;
        font-size: 1rem;
        font-weight: $font-weight-bold;
      }

      span.heading-5 {
        display: block;
        margin-top: 0;
      }

      span.heading-4 {
        display: block;
        margin-top: -2px;
      }
    }
  }

  &.list-check {
    li {
      &::before {
        content: url('@/Images/icons/check.svg');
        padding-top: 4px;
      }
    }
  }

  &.list-uncheck {
    li {
      &::before {
        content: url('@/Images/icons/close.svg');
        padding-top: 4px;
      }
    }
  }
}

a {
  text-decoration: underline;
  text-decoration-color: $color-accent--hover;

  &.underline-mono {
    text-decoration-color: $color-black;
  }
}

table {
  tr {
    display: flex;
    padding: $spacing-md !important;
    gap: $spacing-xsm $spacing-lg;
    background-color: transparent !important;

    td {
      flex: 1;
      padding: 0 !important;
      border: none !important;
    }
  }
}

figure {
  width: 100%;

  &.image-left {
    justify-self: start;
  }

  &.image-center {
    justify-self: center;
  }

  &.image-right {
    justify-self: end;
  }
}

.ck-widget {
  * {
    margin-block-end: auto;
  }

  &.image-inline {
    float: left;
    margin: 0 10px 0 0;
  }

  &.media {
    display: block;
    .ck-media__wrapper {
      margin: 0;
      
      > div {
        pointer-events: none;
      }
    }
  }
}