ilios/frontend

@use "../ilios-common/mixins" as cm;
@use "../ilios-common/colors" as c;

@mixin main-list-filters() {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;

  @include cm.for-laptop-and-up {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  @include cm.for-desktop-and-up {
    justify-content: flex-start;
  }
}

@mixin main-list-filter() {
  padding: 0 1rem 1rem 1rem;
  white-space: nowrap;

  @include cm.for-laptop-and-up {
    padding-bottom: 0;
    width: 25%;
  }

  @include cm.for-desktop-and-up {
    margin-right: 2rem;
    width: auto;
  }

  select {
    @include cm.ilios-select;
    width: 90%;
  }

  input {
    @include cm.ilios-input;
    width: 100%;
  }
}

@mixin main-list-box() {
  display: block;
  width: 100%;
}

@mixin main-list-box-header() {
  border-bottom: 1px solid c.$culturedGrey;
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0;
  text-align: center;

  @include cm.for-laptop-and-up {
    flex-direction: row;
    justify-content: space-between;
    margin-left: 1rem;
  }
}

@mixin main-list-box-header-title {
  @include cm.ilios-heading-h4;
  @include cm.text-align-bottom;
  margin-bottom: 0.5rem;
  @include cm.for-laptop-and-up {
    margin-bottom: 0;
  }
}

@mixin main-list-box-header-actions {
  @include cm.for-laptop-and-up {
    padding-right: 1rem;
    text-align: right;
  }

  @include cm.for-phone-only {
    & > * {
      margin-top: 0.25em;
    }
  }
}

@mixin main-list-saved-new() {
  border: 1px solid c.$fernGreen;
  margin: 1rem;
  padding: 1rem;
}

@mixin main-list-box-table() {
  clear: both;
  display: block;
  padding: 1rem;

  table {
    @include cm.ilios-table-structure;
    @include cm.ilios-table-colors;
    @include cm.ilios-removable-table;
    @include cm.ilios-zebra-table;

    thead {
      background-color: c.$culturedGrey;
    }
  }
}

@mixin main-list-loading-table() {
  @keyframes shimmer {
    0% {
      background-position: -1000px 0;
    }
    100% {
      background-position: 1000px 0;
    }
  }

  animation: shimmer 2s infinite;
  background: linear-gradient(to right, #eff1f3 4%, #e2e2e2 25%, #eff1f3 36%);
  background-size: 1000px 100%;

  td {
    color: transparent;
    text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 10px;
  }
}