/**
 * @file
 * Table
 *
 * Contains styles for tables in main content region.
 */

@use '_helper' as *;

table {
  display: block;
  max-width: 100%;
  border-spacing: 0;
  clear: both;

  th,
  td {
    text-align: left;
    min-width: 200px;

    &.wide {
      min-width: 300px;

      @media screen and (min-width: $break-large) {
        min-width: 400px;
      }
    }
  }

  th {
    @include body(true);
  }

  td {}

  thead {
    position: sticky;
    top: 0;
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
    z-index: 100;

    /* Hide scrollbar for Chrome, Safari and Opera */
    &::-webkit-scrollbar {
      display: none;
    }

    tr {
      th {
        padding: 18px 10px 19px;
        background-color: $color-blue-light;
        border-top: solid 1px $color-black-50;
        border-bottom: solid 1px $color-black-50;

        @media screen and (min-width: $break-large) {
          padding: 19px 10px;
        }

        &:first-child {
          padding-left: 20px;
          border-left: solid 1px $color-black-50;
          border-top-left-radius: 15px;
        }

        &:last-child {
          padding-right: 20px;
          border-right: solid 1px $color-black-50;
          border-top-right-radius: 15px;
        }
      }
    }
  }

  tbody {
    &:first-child {
      tr:first-child {

        td,
        th {
          border-top: solid 1px $color-black-50;

          &:first-child {
            border-top-left-radius: 15px;
          }

          &:last-child {
            border-top-right-radius: 15px;
          }
        }
      }
    }

    tr {
      &:last-child {

        td,
        th {
          &:first-child {
            border-bottom-left-radius: 15px;
          }

          &:last-child {
            border-bottom-right-radius: 15px;
          }
        }
      }

      td,
      th {
        padding: 22px 10px;
        border-bottom: solid 1px $color-black-50;
        vertical-align: top;

        &:first-child {
          padding-left: 20px;
          border-left: solid 1px $color-black-50;
        }

        &:last-child {
          padding-right: 20px;
          border-right: solid 1px $color-black-50;
        }
      }
    }
  }

  .table-scroller {
    @include focus-dark;
    overflow: auto;
    display: block;
    width: 100%;
  }
}

.table-block {
  &__wrapper {
    margin: calc($spacing-vertical-lg * 0.2) 0;
    padding: 0;
    position: relative;

    @media screen and (max-width: ($break-medium - 1)) {
      margin-right: -20px;
    }

    @media screen and (min-width: $break-medium) {
      clear: both;
    }

    @media screen and (min-width: $break-large) {
      margin: calc($spacing-vertical-lg * 0.3) 0;
    }
  }

  &__holder {
    &.js-scroll--right {
      .table-block__next {
        display: block !important;
      }
    }

    &.js-scroll--left {
      .table-block__prev {
        display: block !important;
      }
    }
  }

  &__prev,
  &__next {
    padding: 0;
    display: none;
    width: 35px;
    height: 35px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    font-size: 0;
    line-height: 0;
    background-color: $color-gold;
    border: 0;
    border-radius: 100%;
    transition: 0.1s background-color;

    @media screen and (min-width: $break-large) {
      width: 54px;
      height: 54px;
      left: -27px;
    }

    &:hover {
      background-color: $color-blue-dark;

      &::before {
        border-top-color: $color-white;
      }

      &::after {
        border-top-color: $color-white;
        border-right-color: $color-white;
      }
    }

    &::before {
      @media screen and (min-width: $break-large) {
        content: '';
        display: block;
        width: 22px;
        border-top: solid 3px $color-black;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(calc(-50% - 1px), -50%);
        transition: 0.1s border-top-color;
      }
    }

    &::after {
      content: '';
      display: block;
      width: 9px;
      height: 9px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(calc(-50% - 3px), -50%) rotate(45deg);
      border-top: solid 3px $color-black;
      border-right: solid 3px $color-black;
      transition: 0.1s border-top-color, 0.1s border-right-color;

      @media screen and (min-width: $break-large) {
        width: 14px;
        height: 14px;
        transform: translate(-50%, -50%) rotate(45deg);
      }
    }
  }

  &__next {
    left: auto;
    right: 20px;

    @media screen and (min-width: $break-large) {
      right: -27px;
    }
  }

  &__prev {
    &::before {
      @media screen and (min-width: $break-large) {
        transform: translate(calc(-50% - -1px), -50%);
      }
    }

    &:after {
      transform: translate(calc(-50% - -3px), -50%) rotate(225deg);

      @media screen and (min-width: $break-large) {
        transform: translate(-50%, -50%) rotate(225deg);
      }
    }
  }
}