.data-table {
  @include font-style('body--m');

  &__table {
    width: 100%;

    th,
    td {
      padding-right: 30px;
      position: relative;
      text-align: left;
      vertical-align: top;

      &.align-right {
        padding-left: 30px;
        padding-right: 0;
        text-align: right;
      }
    }

    th {
      padding-bottom: $spacing--s;
    }

    th .sort-by {
      cursor: pointer;
      display: inline-block;
      padding-right: 17px;
      position: relative;

      &:before,
      &:after {
        border: 4px solid transparent;
        content: '';
        display: block;
        height: 0;
        position: absolute;
        right: 0;
        top: $baseline * 1.5;
        width: 0;
      }

      &:before {
        margin-top: $baseline * -1;
      }

      &:after {
        margin-top: $baseline * 0.1;
      }
    }

    td {
      padding-bottom: $baseline * 1.7;
      padding-top: $baseline * 1.7;

      &:first-child {
        padding-left: 0;
      }

      .data-table__action {
        margin-top: $baseline * 0.3;
      }
    }
  }

  &--compact {
    @include font-style('body--m');

    td {
      padding-bottom: $baseline * 1.2;
      padding-top: $baseline * 1.2;
    }
  }

  &--spacious {
    @include font-style('body--m', 'body--l');

    th .sort-by {
      &:before {
        margin-top: $baseline * -0.8;
      }

      &:after {
        margin-top: $baseline * 0.3;
      }
    }

    td {
      padding-bottom: $baseline * 2.5;
      padding-top: $baseline * 2.5;
    }
  }

  &__cell--small {
    width: $data-table-cell--s;
  }

  &__cell--medium {
    width: $data-table-cell--m;
  }

  &__cell--large {
    width: $data-table-cell--l;
  }

  .collapsible__content {
    display: flex;
    flex-wrap: wrap;
  }

  &__content {
    @include font-style('body--l');
    flex: 1;
    padding-bottom: $spacing--m;
    width: 100%;

    li + li {
      margin-top: $spacing--xs;
    }

    .text--alternative {
      @include font-style('body--m', 'body--l');
      display: block;
    }
  }
}

// background mapping
@include data-table-background-mapping;