// Copyright 2018-Present Okta, Inc.

// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at

// http://www.apache.org/licenses/LICENSE-2.0

// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

/* stylelint-disable selector-max-compound-selectors, max-nesting-depth */

.ods-table {
  width: auto;
  margin: 0;
  border-spacing: 0;
  border-collapse: collapse;
  line-height: $title-line-height;

  &:only-child {
    margin-bottom: 0;
  }

  caption {
    @include is-visually-hidden;
  }

  td,
  th {
    max-width: $max-line-length;
    padding: $spacing-s;
    text-align: left;
    vertical-align: baseline;
    overflow-wrap: break-word;
  }

  th {
    color: $text-heading;
    font-weight: 600;
  }

  thead {
    th {
      border-top: 1px solid $border-color-display;
      border-bottom: 1px solid $border-color-display;
    }
  }

  tbody {
    [rowspan] {
      border-bottom: 1px solid $border-color-display;
    }

    tr {
      td,
      th {
        border-bottom: 1px solid $border-color-display;
      }

      &:first-child {
        [rowspan] {
          border-top: 0;
        }
      }
    }
  }

  &[data-null] {
    tbody {
      display: block;
    }

    tfoot {
      tr {
        td {
          max-width: 100%;
          padding: $spacing-l $spacing-xl;
          background: cv('gray', '000');
          color: $text-sub;
          text-align: center;
        }
      }
    }
  }

  .ods-table--sort {
    position: relative;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    text-align: inherit;
    white-space: nowrap;
  }

  .is-ods-table-unsorted,
  .is-ods-table-asc,
  .is-ods-table-desc {
    padding: 0 calc(1em + #{$spacing-s}) 0 0;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      right: 0;
      width: 1em;
      height: 1em;
      margin: 0 0 0 $spacing-s;
      transform: translateY(-50%) scale(0.75);
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  .is-ods-table-unsorted {
    &::after {
      background-image: get-icon('double-arrow', $text-sub);
    }

    &:hover {
      &::after {
        background-image: get-icon('double-arrow', $text-heading);
      }
    }
  }

  .is-ods-table-asc {
    &::after {
      background-image: get-icon('arrow', $text-heading);
    }
  }

  .is-ods-table-desc {
    &::after {
      transform: translateY(-50%) rotate(180deg) scale(0.75);
      background-image: get-icon('arrow', $text-heading);
    }
  }

  .is-ods-table-num {
    text-align: right;
    font-feature-settings: 'lnum', 'tnum';
  }

  .is-ods-table-date {
    white-space: nowrap;
  }

  .is-ods-table-checkbox {
    padding-right: 0;

    .u-visually-hidden {
      display: inline-block;
      position: relative;
      width: 0;
      height: 1em;
    }
  }
}

.ods-table--figure {
  max-width: 100%;
  margin: 0 0 $spacing-m;
  overflow-x: auto;

  &:last-child {
    margin: 0;
  }

  .ods-table--figcaption {
    margin-bottom: $spacing-s;
    color: $text-heading;
    font-size: $size-title-4;
    font-weight: 600;
    text-align: left;
  }
}

.is-ods-table-inessential {
  @media only screen and (max-width: 40rem) {
    @include is-visually-hidden;
  }
}