/*
  @project: monepi/administrateur
  @create: 08/11/2020
  @description: Table block stylesheet
*/

/* ----------------------------------------------------------------------------- == SUMMARY */
/*
  1. Table
    1.a blue
    1.b scrollable
    1.1. thead, tbody
      1.a. sticky
    1.2. tr
      1.2.a. color-blue
      1.2.b. color-orange
      1.2.c. color-red
      1.2.d. color-pink
      1.2.e. color-green
      1.2.f. color-yellow
      1.2.g. light
    1.3. th, td
      1.3.a. flex-grow-{2,5}
      1.3.b. fixed-width
      1.3.d. action
      
*/

/* ----------------------------------------------------------------------------- == Table */
.Table {
  background-color: #EBEFF0;
  border-radius: 10px;
  display: flex;
  flex: 1 1 auto;
  flex-flow: column nowrap;
  padding: 0 10px 10px 10px;
}

.Table.blue {
  background-color: var(--blue-100);
}

.Table.scrollable tbody {
  overflow-y: scroll;
}

.Table.scrollable thead,
.Table.scrollable tfoot {
  padding-right: 23px;
}

/* ----------------------------------------------------------------------------- == tbody, thead */
.Table thead,
.Table tbody,
.Table tfoot {
  padding: 0 13px;
}

.Table thead.sticky {
  background-color: #EBEFF0;
  position: sticky;
  top: 0px;
  z-index: 1;
}

.Table tbody {
  background-color: var(--white);
  border-radius: 10px;
  flex: 1;
  margin-top: 10px;
  overflow-y: auto;
}

.Table tbody.overflow {
  scrollbar-width: 10px;
  margin-right: -10px;
}

.Table > thead + tbody {
  margin-top: 0;
}

.Table > tfoot {
  background-color: var(--white);
  border-radius: 10px;
  margin-top: 10px;
}

/* ----------------------------------------------------------------------------- == tr */
.Table tr {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}

.Table tr[role=button]:hover {
  background-color: #00000007;
  cursor: pointer;
}

.Table tbody > tr:not(:last-child) {
  border-bottom: thin solid #EDEDED;
}

.Table tr.color-blue > td,
.Table tbody > tr > td.color-blue {
  color: var(--blue-500);
}

.Table tr.color-orange  > td,
.Table tbody > tr > td.color-orange {
  color: var(--orange-500);
}

.Table tr.color-red  > td,
.Table tbody > tr > td.color-red {
  color: var(--red-500);
}

.Table tr.color-pink  > td,
.Table tbody > tr > td.color-pink {
  color: var(--pink-500);
}

.Table tr.color-green > td,
.Table tbody > tr > td.color-green {
  color: var(--green-500);
}

.Table tr.color-yellow > td,
.Table tbody > tr > td.color-yellow {
  color: var(--yellow-500);
}

tr.color-blue svg,
td.color-blue svg,
tr.color-orange svg,
td.color-orange svg,
tr.color-red svg,
td.color-red svg,
tr.color-pink svg,
td.color-pink svg,
tr.color-green svg,
td.color-green svg,
tr.color-yellow svg,
td.color-yellow svg {
  color: inherit;
} 

.Table tr.light > td,
.Table td.light {
  color: var(--grey-500);
}

/* ----------------------------------------------------------------------------- == th, td */
.Table th {
  font-weight: 900;
  text-transform: uppercase;
}

.Table th,
.Table td {
  color: var(--grey-600);
  align-items: center;
  display: flex;
  flex-basis: 0;
  flex-direction: column;
  flex-flow: row nowrap;
  flex-grow: 1;
  font-family: var(--font-base);
  font-size: 1rem;
  letter-spacing: -0.27px;
  line-height: 1.5em;
  overflow: hidden;
  padding: 15px 10px;
  min-width: 0px;
  text-overflow: ellipsis;
  word-break: break-word;
}

/* Allow to enlarge the current cell */
.Table th.flex-grow-2,
.Table td.flex-grow-2 {
  flex-grow: 2;
}

.Table th.flex-grow-3,
.Table td.flex-grow-3 {
  flex-grow: 3;
}

.Table th.flex-grow-4,
.Table td.flex-grow-4 {
  flex-grow: 4;
}

.Table th.flex-grow-5,
.Table td.flex-grow-5 {
  flex-grow: 5;
}

/* Allow to set a fixed width to the current cell */
.Table th.fixed-width,
.Table td.fixed-width {
  flex: 0 0 auto;
}

.Table td.action {
  color: var(--purple-100);
}

.Table td a:not(.Button) {
  color: inherit;
  text-decoration: none;
}

.Table td.action:hover {
  color: var(--green-500);
}

.Table th.center,
.Table td.center {
  justify-content: center;
  text-align: center;
}

.Table th.no-break,
.Table td.no-break > * {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}