@use '@gear-js/ui/mixins' as *;
@use '@/shared/assets/styles/mixins' as *;
@use '@/shared/assets/styles/shared' as *;
@use '@/shared/assets/styles/variables' as *;
@use '@/shared/assets/styles/animations' as *;

.table {
  $borderRadius: 16px;

  & > *:first-child {
    border-top-left-radius: $borderRadius;
    border-top-right-radius: $borderRadius;
  }

  & > *:last-child {
    border-bottom-left-radius: $borderRadius;
    border-bottom-right-radius: $borderRadius;
  }

  & > *:nth-child(odd) {
    background-color: $bgColor5;
  }

  & > *:nth-child(even) {
    background-color: $bgColor4;
  }
}

.tableRow {
  display: grid;
  grid-template-columns: minmax(toRem(125), 0.2fr) 0.7fr auto;
  grid-template-rows: min-content;
  padding: toRem(16) toRem(28) toRem(16) toRem(24);
  justify-content: space-between;
  gap: 30px;
  align-items: center;

  .name {
    font-size: $fontSizeSmall;
    line-height: 1.3;
    color: $gray600;
  }

  .value {
    color: $successColor;
    font-size: $fontSize;
    font-family: 'Kanit';
    font-weight: 500;
    line-height: 1.3;
  }

  .hideOwerflow {
    overflow: hidden; // for children text-overflow
  }
}