@use '../../sass/abstracts' as *;

#{$component-prefix}table {
  position: relative;
  width: 100%;
  color: $sodra-black;

  [aria-hidden='true'] {
    display: none;
  }

  table {
    width: 100%;
    margin: 0;
  }

  td,
  th {
    text-align: left;
    padding: 1.5rem;
    border-bottom: 1px solid $sodra-black-50;
  }

  td:first-child,
  th:first-child,
  td:last-child,
  th:last-child {
    padding: 1.5rem 0;
  }

  th {
    @include headline-small;
    text-align: left;
  }

  thead {
    th {
      &#{$component-prefix}table--hide-sm {
        @include media-breakpoint-down(md) {
          display: none;
        }
      }

      &#{$component-prefix}table__sort-column {
        position: relative;
        cursor: pointer;
        padding-right: 20px;

        &:after {
          @include unity-symbols('keyboard-arrow-down', 0.75rem);
          margin-left: 0.5rem;
          position: absolute;
          margin-top: 1px;
        }

        &[aria-sort='ascending'] {
          &:after {
            @include unity-symbols('keyboard-arrow-up', 0.75rem);
            margin-top: 1px;
          }
        }
      }
    }
  }

  tbody {
    td {
      text-align: left;
      position: relative;

      &#{$component-prefix}table--hide-sm {
        @include media-breakpoint-down(md) {
          display: none;
        }
      }
    }

    i,
    span {
      display: inline-block;
      vertical-align: middle;
    }
  }

  caption {
    @include display-small;
    padding: 1.5rem;
    text-align: center;
    border-bottom: 1px solid $sodra-black-10;

    @include media-breakpoint-up(md) {
      @include display-large;
    }
  }

  &--auto-height-and-width {
    table {
      height: auto !important;
      width: 100% !important;

      tr,
      th,
      td {
        height: auto !important;
        width: auto !important;
      }
    }
  }

  &--no-wrap {
    text-wrap: nowrap;
  }

  &--small {
    &#{$component-prefix}table--has-caption {
      table {
        padding-top: 34px;
      }
    }

    table {
      height: auto !important;
      width: 100% !important;

      tr,
      th,
      td,
      caption {
        height: auto !important;
        width: auto !important;
        padding: 0.5rem 1rem !important;
        border-width: 1px;

        &:after {
          display: none;
        }
      }
    }
  }

  &--border {
    border: 1px solid $sodra-black-50;

    td,
    th {
      padding: 1.5rem !important;
    }
  }

  &--hide-sm {
    @include media-breakpoint-down(md) {
      display: none;
    }
  }

  @include media-breakpoint-down(lg) {
    &--has-caption {
      table {
        padding-top: 52px;
      }

      caption {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        z-index: 1;
      }
    }

    &--collapse {
      table {
        margin-left: 10rem;

        td,
        th {
          text-wrap: nowrap;
        }

        td:after {
          display: none !important;
        }

        th:first-child,
        td:first-child {
          position: absolute;
          width: 10rem !important;
          left: 0;
          top: auto;
          border-right: 1px solid $sodra-black-20;
          border-top-width: 3px;
          z-index: 3;
        }
      }
    }

    &--targetcollapse {
      table {
        margin-left: 10rem;
        width: calc(100% - 10rem) !important;

        td,
        th {
          white-space: nowrap;
        }

        td:first-child,
        th:first-child {
          padding: 1.5rem;
        }

        th.is-main-column,
        td.is-main-column {
          position: absolute;
          width: 10rem !important;
          left: 0;
          top: auto;
          border-right: 1px solid $sodra-black-20;
          border-top-width: 3px;
          overflow: hidden;
          text-overflow: ellipsis;
          z-index: 3;
          background-color: $sodra-black-5;
        }

        tbody tr td.maincolumn,
        tbody tr td.is-main-column {
          position: absolute !important;
          width: 10rem !important;
          left: 0;
          top: auto;
          border-right: 1px solid $sodra-black-20;
          z-index: 3;
          overflow: hidden;
          text-overflow: ellipsis;

          &:after {
            display: none;
          }
        }
      }
    }
  }

  &--zebra {
    thead {
      th {
        .u-background-color-light-grey & {
          background-color: $sodra-black-5;
        }
      }
    }

    tbody {
      tr {
        &:nth-child(odd) {
          td {
            background-color: $white;

            .u-background-color-light-grey & {
              background-color: $light-grey;
            }
          }
        }
      }
    }
  }

  &--dense {
    thead {
      th {
        padding: 0.5rem 0.5rem 0.25rem;
      }
    }

    tbody {
      td {
        padding: 0.5rem;
      }
    }
  }

  &--dense-except-first-last {
    thead {
      th:not(:first-child):not(:last-child) {
        padding: 0.5rem 0.5rem 0.25rem;
      }
    }
    tbody {
      td {
        border-bottom-width: 1px;
        &:not(:first-child):not(:last-child) {
          padding: 0.5rem;
        }
      }
    }
  }

  &__scroll-container {
    overflow-x: auto;
    overflow-y: visible;
    max-width: 100%;

    &::-webkit-scrollbar {
      width: 0.5rem;
      height: 0.5rem;
    }

    &::-webkit-scrollbar-thumb {
      background-color: $blue;

      @include border-radius(0.25rem);
    }
  }

  tbody &__row {
    &--danger td {
      background-color: $red-25;
    }

    &--success td {
      background-color: $green-25;
    }

    &--info td {
      background-color: $blue-25;
    }
  }

  &__icon {
    width: 3rem;
    padding-right: 0;
    vertical-align: middle;
  }

  &__icon__calendar {
    background: url(../../images/sodra-calendaricon-blue.svg) center center
      no-repeat;
    background-size: 46px;
    width: 44px;
    height: 53px;
    padding: 10px 5px;
    font-family: $font-family-body;
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    vertical-align: middle;

    .calendar-day {
      font-size: 18px;
      font-weight: 700;
      line-height: 1;
      margin: 2px 0;
    }

    .calendar-month {
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
    }

    &--absolute {
      position: absolute;
      top: 10px;
      left: 10px;
    }
  }

  &__clickable-row {
    cursor: pointer;

    td:last-child {
      position: relative;
      padding-right: 2.5rem;

      &::after {
        @include unity-symbols('arrow-forward');
        position: absolute;
        right: 5px;
        margin-left: 0.5rem;
        transition: transform 0.3s ease-out;
        float: right;
      }
    }

    &:hover {
      td {
        color: $sodra-black-80 !important;
      }

      td:last-child::after {
        transform: translateX(4px);
      }
    }
  }
}