@import "../_variables";

@import "~bootstrap/scss/tables";

$typography-breakpoint: map-get($grid-breakpoints, "sm") - 1 !default;

html,
body {
  background: $body-bg;
  color: $body-color;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: $headings-color;
}

a {
  color: $link-color;
}

img,
.captionImage,
.image,
.ss-htmleditorfield-file {
  display: block;
  margin-bottom: $element-reduced-spacer-y;
  margin-top: $element-reduced-spacer-y;
  max-width: 100%;

  @media (min-width: $typography-breakpoint + 1) {
    margin-left: $element-reduced-spacer-x;
    margin-right: $element-reduced-spacer-x;
  }

  &.center {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  &.w-100 {
    margin-left: 0;
    margin-right: 0;
    text-align: center;
  }

  &.start,
  &.left,
  &.leftAlone {
    clear: left;
    float: left;

    @media (min-width: $typography-breakpoint + 1) {
      margin: 0 $element-reduced-spacer-x $element-reduced-spacer-y 0;
    }
  }

  &.end,
  &.right,
  &.rightAlone {
    clear: right;
    float: right;

    @media (min-width: $typography-breakpoint + 1) {
      margin: $element-reduced-spacer-y 0 0 $element-reduced-spacer-x;
    }
  }

  iframe {
    height: 100% !important;
    width: 100% !important;
  }
}

.captionImage {
  img {
    margin-bottom: $element-reduced-spacer-y !important;
  }

  .caption {
    font-size: 0.8rem;
  }
}

.left,
.text-left,
.text-start {
  text-align: left;
}

.center,
.text-center {
  text-align: center;
}

.right,
.text-right,
.text-end {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

table {
  border-collapse: collapse;
  max-width: 100%;
  width: 100%;

  @extend .table;
  @extend .table-striped;
  @extend .table-bordered;

  &.table-none {
    @extend .table-borderless;
    border: 0;

    tr,
    td,
    th {
      background: none !important;
      border: 0;
      box-shadow: none !important;
    }
  }
}

ul,
ol {
  padding-left: $spacer;

  li {
    margin: 0.5em 0;
    padding-left: 0.5em;
    position: relative;
  }
}

ul {
  list-style: none;

  li {
    list-style: none;
    padding-left: 0;

    &:before {
      content: "\2022";
      display: inline-block;
      font-size: 1em;

      left: -0.75em;
      margin-right: 0.5em;
      opacity: 0.5;
      position: absolute;
      top: -0.1em;
    }
  }
}

table,
p,
tr,
th,
td,
img,
iframe {
  max-width: 100% !important;

  @media (max-width: $typography-breakpoint) {
    border: 0 !important;
    display: block;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
  }
}

table,
p,
tr,
th,
td,
img {
  @media (max-width: $typography-breakpoint) {
    height: auto !important;
  }
}

@media (max-width: $typography-breakpoint) {
  .d-typography-breakpoint-none {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  thead {
    display: block;
    text-align: center;

    > tr {
      display: flex;
    }
  }

  tbody {
    display: block;
  }

  td {
    display: flex;
    flex-direction: column;

    &:before {
      content: attr(data-label);
      display: block;
      font-weight: bold;
      min-width: 50%;
      padding: 0 $spacer * 0.5;
      width: 50%;
    }
  }
}

img {
  border: 1px dashed;
}