.table {
  $component-name: "table";

  @mixin table-wrap-style {
    display: flex;
    flex-direction: column;
    width: 100%;

    thead {
      display: none;
    }

    tbody,
    tfoot {
      width: 100%;

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

        &:first-child {
          border-top: none;
        }
      }
    }

    tfoot {
      border-top: none; //No border collapse when table has display: flex; this removes border that would otherwise appear dobule
    }

    th,
    td {
      padding: spacing(-2) 0 0 0;

      &:last-child {
        padding-bottom: spacing(-2);
      }

      &::before {
        content: attr(data-label);
        display: block;
        @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
        color: color("foreground");
        }

      &.#{$component-name}__cell {
        &--align-right {
          text-align: left;
        }

        &--fit-to-content {
          width: auto;
          white-space: normal;
        }
      }
    }
  }

  width: 100%;
  overflow: scroll;
  border-collapse: collapse;
  @include set-font(0, "single");
  color: color("foreground");
  margin-top: spacing(0);
  margin-bottom: spacing(0);

  caption {
    text-align: left;
    @include set-font(1, "single", $weight: "bold");
    margin-bottom: spacing(-3);

    & span,
    .table__caption__note {
      display: block;
      color: color("foreground-secondary");
      @include set-font(-1, "single");
      margin-bottom: spacing(-3, $subtract: spacing(-4));
    }

    &.table__caption--large {
      @include set-font(2, "single", $weight: "bold");

      & span,
      .table__caption__note {
        margin-top: spacing(-5);
      }
    }
  }

  thead {
    text-align: left;
    @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
    color: color("foreground");
    vertical-align: bottom;
    background-color: var(--color-background);
    box-shadow: inset 0 -2px 0 color("border");
    z-index: 1;
      
    &.sticky {
      position: sticky;
      top: 0;
      background-color: var(--color-background);
    }

    th {
      padding: 0 spacing(-1) spacing(-5) 0;

      //TODO: This should be deprecated and use .tooltip component in stead
      button:not(.tooltip) {
        @include set-font(-1, "single", $weight: "bold", $transform: "uppercase");
        display: inline-flex;

        @include icon-style {
          margin-left: spacing(-5);
          order: 10;
        }

        //TODO deprecate, use .icon-[icon name] class instead
        &[data-icon]::before {
          content: attr(data-icon);
        }

        &:hover {
          color: color("foreground-hover");
          outline: none;
        }

        &:active {
          color: color("foreground-theme");
          outline: none;
        }
      }
    }
  }

  tbody {
    border-bottom: $width-border solid color("border");
    vertical-align: top;

    tr {
      border-bottom: $width-border-slim solid color("border");
    }

    & + tfoot {
      border-top: none;
    }
  }

  tfoot {
    border-top: $width-border solid color("border");
    border-bottom: $width-border solid color("border");
    font-weight: $font-weight-bold;
  }

  th,
  td {
    padding: spacing(-2) spacing(-1) spacing(-2) 0;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    
    &:last-child {
      padding-right: 0;
    }

    &.#{$component-name}__cell {
      //TODO: depreacte --number class. Bliver brugt i den gamle ferieoversigt
      &--number,
      &--align-right {
        text-align: right;
      }

      &--align-center-vertical {
        vertical-align: middle;
      }

      &--fit-to-content {
        width: 1%; //can't be zero, because tables...
        white-space: nowrap;
      }
    }

  }

  th {
    font-weight: $font-weight-bold;

    &.#{$component-name}__cell { //Styling af th til quota-two-overview i MinAnsøgning
      &--constrain-width {
        width:7rem;
      }

      &--width {
        width: 33%;
      }
    }
  }

  td {
    word-break: break-word;
  }

  p {
    margin-top: 0;
    margin-bottom: 0;

    & + p {
      margin-top: spacing(-3);
    }
  }

  &--flashable-rows {
    tbody,
    tfoot {
      tr {
        transition: background-color 800ms ease-out; 

        &.#{$component-name}__row--flash-attention {
          background-color: color("utility-attention-background");
        }
  
        &.#{$component-name}__row--flash-confirm {
          background-color: color("utility-confirm-background");
        }
  
        &.#{$component-name}__row--flash-warning {
          background-color: color("utility-warning-background");
        }
        &.#{$component-name}__row--flash-transparent {
          background-color: transparent;
        }
      }
    }
  }
  

  &--no-vertical-margin {
    margin-top: 0;
    margin-bottom: 0;
  }

  &--no-margin-top {
    margin-top: 0;
  }

  &--dense {
    th,
    td {
      padding: spacing(-3) spacing(-3) spacing(-3) 0;

      &:last-child {
        padding-right: 0;
      }
    }

    thead {
      th {
        padding: 0 spacing(-3) spacing(-5) 0;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  &--very-dense {
    @include set-font(-1, "single");

    th,
    td {
      padding: spacing(-4) spacing(-4) spacing(-4) 0;

      &:last-child {
        padding-right: 0;
      }
    }

    thead {
      th {
        padding: 0 spacing(-4) spacing(-5) 0;

        &:last-child {
          padding-right: 0;
        }
      }
    }
  }

  &--large-font {
    @include set-font($typography-h1-fontsize - 2, "single");
  }

  &--larger-font {
    @include set-font($typography-h1-fontsize - 1, "single");
  }

  &--largest-font {
    @include set-font($typography-h1-fontsize, "single");
  }

  &--constrain-width {
    max-width: $line-width-max;
  }

  &--wrap {
    &-default-width {
      @include breakpoint("medium", $mobile-last: true) {
        @include table-wrap-style;
      }
    }

    &-medium-width {
      @include breakpoint("wide", $mobile-last: true) {
        @include table-wrap-style;
      }
    }
  }
}