@use '../utils/color_variables';
@use '../utils/font_variables';
@use '../utils/mixins';
@use '../utils/size_variables';

/**
 * Copyright (c) HashiCorp, Inc.
 * SPDX-License-Identifier: BUSL-1.1
 */

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

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

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

  &.thead {
    box-shadow:
      0 1px 0 color_variables.$grey-light,
      0 -1px 0 color_variables.$grey-light;
    margin: 0;
    padding: 0 size_variables.$spacing-14 0 0;

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

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

    &.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_variables.$spacing-4;
  }

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

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

  a {
    text-decoration: none;
  }
}

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

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

    @include mixins.until(size_variables.$mobile) {
      padding: size_variables.$spacing-12 0 0;
    }
  }

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

    @include mixins.until(size_variables.$mobile) {
      padding: 0 0 size_variables.$spacing-12;
    }
  }
}

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

  @include mixins.until(size_variables.$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;
  }
}