@import 'Variables';
.CoveoFieldTable {
  @include defaultRoundedBorder();
  width: 100%;
  background-color: $color-blueish-white;
  padding-bottom: 10px;
  position: relative;
  word-break: break-all;
  margin-top: 1px;
  th,
  td {
    font-size: $font-size-smaller;
  }
  td {
    width: 99%;
    padding: 10px 20px 0 0;
  }
  th {
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    padding: 10px 10px 0 20px;
  }
  border-collapse: separate;
  margin-bottom: 20px;
  .coveo-clickable {
    @include clickable();
    &.coveo-selected {
      font-weight: bold;
    }
  }
}

.coveo-field-table-toggle {
  @include clickable();
  margin: 0 5px 5px 0;
  .coveo-field-table-toggle-caption {
    margin-right: 5px;
  }
}

.coveo-field-table-toggle-container {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease-in-out;
  &.coveo-no-transition {
    transition: none;
  }
}

.coveo-field-table-toggle-down {
  position: relative;
  top: 2px;
}

.coveo-field-table-toggle-down-svg {
  color: $color-greyish-teal-blue;
  width: 10px;
  height: 6px;
  @include transition(fill-opacity 0.5s);
  fill-opacity: 1;
  &.coveo-opened {
    fill-opacity: 0;
  }
}

.coveo-field-table-toggle-up {
  position: absolute;
  bottom: 44px;
  right: 10px;
  margin: 0;
  height: 0;
}

.coveo-field-table-toggle-up-svg {
  color: $color-greyish-teal-blue;
  width: 10px;
  height: 6px;
  @include transition(fill-opacity 0s);
  fill-opacity: 0;
  &.coveo-opened {
    fill-opacity: 1;
    height: 13px;
    @include transition(fill-opacity cubic-bezier(1, 0, 1, 0) 0.4s);
  }
}

.CoveoFieldValue {
  .coveo-clickable {
    @include clickable();
    @include highContrastModeOutline();
    outline-offset: 3px;
    &.coveo-selected {
      font-weight: bold;
    }
  }
  &.coveo-with-label {
    display: inline-block;
  }
  .coveo-field-caption {
    color: black;
    margin-right: 10px;
  }
}

.coveo-card-overlay {
  .CoveoFieldTable {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 10px 0 0;
    th {
      color: $color-light-grey;
    }
  }
  .coveo-clickable {
    @include clickable($dark-background: true);
  }
}
