@use "../colors" as c;
@use "font-size";
@use "media";

@use "sass:color";

@mixin ilios-table-structure() {
  border-collapse: collapse;
  margin: 0.7rem 0;
  table-layout: fixed;
  width: 100%;

  th {
    text-align: left;
  }

  td {
    border: 0;
  }

  tr,
  td,
  th {
    padding: 0.25rem 0.1rem;
    vertical-align: middle;
  }

  th,
  td {
    overflow-wrap: break-word;

    &.text-left,
    &.align-left {
      text-align: left;
    }

    &.text-center,
    &.align-center {
      text-align: center;
    }

    &.text-right,
    &.align-right {
      text-align: right;
    }

    &.text-top {
      vertical-align: top;
    }

    &.text-middle {
      vertical-align: middle;
    }

    &.text-bottom {
      vertical-align: bottom;
    }
  }

  &.condensed {
    @include font-size.font-size("small");

    tr,
    td,
    th {
      margin: 0;
      padding: 0 0.1rem;
    }
  }

  .hide-from-small-screen {
    display: none;

    @include media.for-laptop-and-up {
      display: table-cell;
    }
  }

  .hide-from-large-screen {
    display: none;

    @include media.for-smaller-than-laptop {
      display: table-cell;
    }
  }

  &.sticky-header {
    position: relative;

    th {
      position: sticky;
      top: 0;
    }
  }
}

@mixin ilios-table-colors($backgroundColor: c.$slightWhite) {
  thead {
    background-color: $backgroundColor;
  }

  th {
    border-bottom: 1px solid color.adjust(c.$culturedGrey, $lightness: -15%);
    background-color: $backgroundColor;
  }
}

@mixin ilios-removable-table() {
  tbody {
    .confirm-removal {
      background-color: c.$lavenderBlush;

      .confirm-message {
        color: c.$crimson;
        font-weight: bold;
        padding-left: 8em;
        padding-right: 8em;
        text-align: center;
        width: 100%;
      }

      .confirm-buttons {
        padding-bottom: 1.5em;
        padding-top: 1.1em;
      }

      &:hover {
        background-color: c.$lavenderBlush;
      }

      .remove {
        background-color: c.$white;
        color: c.$crimson;

        &:hover {
          background-color: c.$crimson;
          color: c.$white;
        }
      }
    }
  }
}

@mixin ilios-zebra-table() {
  tbody tr:nth-child(even) {
    background-color: color.adjust(c.$culturedGrey, $lightness: 4%);
  }
}
