/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: MPL-2.0
 */

.info-table-row {
  box-shadow: 0 1px 0 $grey-light;
  margin: 0;

  &.has-no-shadow {
    box-shadow: none;
  }

  @include from($mobile) {
    display: flex;
  }

  &.thead {
    box-shadow: 0 1px 0 $grey-light, 0 -1px 0 $grey-light;
    margin: 0;
    padding: 0 $size-6 0 0;

    .column {
      padding: 0.5rem 0.75rem;
    }
  }

  .column {
    align-self: center;
    padding: $spacing-m;

    &.info-table-row-edit {
      padding-bottom: 0.3rem;
      padding-top: 0.3rem;
    }

    textarea {
      min-height: 35px;
    }

    .helper-text {
      font-weight: normal;
    }
    &.justify-right {
      display: flex;
      justify-content: right;
    }
  }

  .hs-icon {
    margin-right: $size-11;
  }

  .icon-true {
    color: $green-500;
  }

  .icon-false {
    color: $ui-gray-300;
  }

  a {
    text-decoration: none;
  }
}

.info-table-row:not(.is-mobile) .column {
  @include until($mobile) {
    padding: 0;
  }

  &:first-child {
    padding-left: 0;

    @include until($mobile) {
      padding: $size-8 0 0;
    }
  }

  &:last-child {
    padding-right: 0;

    @include until($mobile) {
      padding: 0 0 $size-8;
    }
  }
}

.info-table-row-header {
  margin: 0;
  font-size: $size-8;
  color: $grey;
  font-weight: $font-weight-semibold;

  @include until($mobile) {
    display: none;
  }
  .info-table-row:not(.is-mobile) .column:last-child {
    padding-left: 0;
  }
}

.label-overflow {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  // inline display necessary for nested elements so ellipsis shows
  > div {
    display: inline;
  }
  > div > span {
    display: inline;
  }
}