.oh-table {
  width: 100%;
  font-size: 0.85rem;
  border-collapse: collapse;
  border: 1px solid $light-button-color;
  background-color: $white;

  @media (max-width: 991.98px) {
    display: block;
    max-width: 100vw;
    overflow-x: auto;
  }
}
.oh-table thead tr th {
  padding: 1.25rem 0.65rem;
  text-align: left;
  border-bottom: 3px solid $light-button-color;
  color: $table-text-color;
  font-weight: 400;
}

.oh-table tbody tr td {
  padding: 1.25rem 0.65rem;
  border-bottom: 1px solid $light-button-color;
}
.oh-table tbody tr {
  &:hover {
    background-color: $light-grey;
    cursor: pointer;
  }
}
.oh-table tbody {
  max-height: 400px;
  overflow-y: auto;
}


/* ====================================
*        Sticky Table
* ================================== */
.oh-sticky-table{
  max-height: 75vh;
  overflow: auto;
  margin:auto;
  max-width: 100%;
  border: 1px solid $border-light-color;
}
.oh-sticky-table--no-highlight .oh-sticky-table__tr{
  &:hover{
    background-color: transparent;
  }
}
.oh-sticky-table--no-overflow{
  overflow-x: auto;
  overflow-y: visible;
}
.oh-sticky-table__table{
  display: table;
  position: relative;
  width:100%;
  table-layout: fixed;
}
.oh-sticky-table__tr{
  display: table-row;
  &:hover{
    background-color: $light-grey;
    cursor: pointer;
  }
}


.oh-sticky-table__td,
.oh-sticky-table__th,
.oh-sticky-table__sd{
  display: table-cell;
  padding: 8px 10px;
  // white-space:nowrap;
  border-bottom: 0.2px solid $border-light-color;
  border-right: 0.2px solid #fff;
  vertical-align: middle;
  width: 160px;
  word-break: break-word;
}
.oh-sticky-table__sd{
  background-color: $white;
  z-index: 10 !important;
  width: 240px;
}
.oh-sticky-table__th:first-child{
  z-index: 11 !important;
}

.oh-sticky-table__th{
  z-index: 10;
  background-color: $white;
  padding: 0.5rem 1rem !important;
}
.oh-sticky-table__thead {
  display: table-header-group;
  font-weight: bold;
  z-index:1;
}
.oh-sticky-table__tbody {
  display: table-row-group;
  height: 60px;
}
.oh-sticky-table__tbody--highlight{
  height: 60px;
  width: 100vw;
  background-color: hsl(185, 68%, 98%);
  border: 1px dashed hsl(185, 68%, 42%);
  border-left: none;
  border-right: 0;
}
.oh-sticky-table__th, .oh-sticky-table__sd{
  position: sticky;
  background: $white;
  color: $text-color;
}
.oh-sticky-table__th{
  top: 0;
  border-bottom: 2px solid $border-light-color;
}
.oh-sticky-table__sd{
  left: 0;
  border-right: 1px solid $border-light-color;
  @media (max-width: 575.98px) {
    position: relative;
  }
}
.oh-sticky-table__sd, .oh-sticky-table__td, .oh-sticky-table__th{
  padding: 0.6rem;
}
.oh-sticky-table--fit .oh-sticky-table__sd,
.oh-sticky-table--fit .oh-sticky-table__td,
.oh-sticky-table--fit .oh-sticky-table__th{
  padding: 0.6rem;
  width: fit-content;
}
.oh-sticky-table__thead div.oh-sticky-table__th:first-child,
.oh-sticky-table__tfoot div.oh-sticky-table__th:first-child{
  left:0;
  z-index:1;
  border-right: 1px solid $border-light-color;
  @media (max-width: 575.98px) {
    position: relative;
  }
}
.oh-sticky-table__sr{
  position: sticky;
  right: 0;
  background-color: $white;
  z-index: 10 !important;
  padding: 1rem;
  border-bottom: 1px solid $border-light-color;
  border-left: 1px solid $border-light-color;
}
.oh-sticky-table__th--sticky{
  right: 0;
  position: sticky;
  border-left: 1px solid $border-light-color;
}
.oh-sticky-table__th--right{
  right: 0;
  border-left: 1px solid $border-light-color;;
}
.oh-sticky-table__button-container{
  display: flex;
  align-items: center;
}
.oh-sticky-table__button-container > * {
  flex-shrink: 0;
}
/* ========================================
*            EDITABLE INPUT
* ====================================== */
.oh-table__editable-input:read-only{
  color: $text-color;
  background-color: transparent;
  border: none;
  height: 100%;
  border: 1px solid transparent;
  &:hover{
    border: 1px solid $border-color;
  }
  &:focus, &:focus-visible{
    outline: none;
    border: none;
  }
}
.oh-table__editable-input{
  border-radius: 0px;
  border: 1px solid $brand-color;
  &:focus, &:focus-visible{
    outline: $brand-color solid 2px;
    border-radius: 0px;
    border: none;
  }
}
.oh-table__add-column{
  min-height: 55px;
}
.oh-table__add-row{
  position: sticky;
  left: 0;
}
.oh-table__add-row-dropdown{
  bottom: 0;
  transform: translateX(50%);
  @media (max-width: 575.98px) {
    transform: translateX(0);
  }
}
.oh-table-config__close-tr, .oh-table-config__close-th{
  border: none;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: $border-light-color;
  position: absolute;
  right: 3px;
  top: 3px;
  display: none;
}
.oh-table-config__tr {
  &:not(:only-child){
    &:hover{
      .oh-table-config__close-tr{
        display: flex;
      }
    }
  }
}
.oh-table-config__th {
  &:not(:only-child){
    &:hover{
      .oh-table-config__close-th{
        display: flex;
      }
    }
  }
}
:is(.oh-table-config__th:nth-last-child(2)):is(.oh-table-config__th:nth-child(2)) {
    .oh-table-config__close-th{
      display: none !important;
    }
}


/* ========================================
*          COLLAPSABLE TABLE
* ====================================== */
.oh-table__toggle-button{
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  &:after{
    content: "";
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTkgMTNoLTZ2NmgtMnYtNkg1di0yaDZWNWgydjZoNnYyWiI+PC9wYXRoPgo8L3N2Zz4=");
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.oh-table__toggle-button.oh-table__toggle-button--show{
  &:after{
    content: "";
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9IiMxZjFmMWYiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNiAxMWgxMnYySDZ2LTJaIj48L3BhdGg+Cjwvc3ZnPg==");
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-size: contain;
  }
}
.oh-table__toggle-child{
  display: none;
}
.oh-table__toggle-child.oh-table__toggle-child--show{
  display: table-row;
}

/* ========================================
*          TABLE CONTROLS
* ====================================== */
.oh-table-controls{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  margin-bottom: 1rem;
}