@use "../../../../styles/typography.scss";
@use "../../../../styles/spacing.scss";
@use "../../../../styles/colors.scss";

.header {
  display: flex;
  gap: spacing.$spacing-1;
  text-align: left;

  &[role="button"] {
    cursor: pointer;
  }
}

.cell,
.text {
  padding-top: var(--row-padding-y);
  padding-bottom: var(--row-padding-y);
  color: colors.$warmgray-60;
  &:hover {
    color: colors.$warmgray-80;
  }

}

.left {
  padding-left: var(--row-padding-left);
}

.right {
  padding-right: var(--row-padding-right);
}

.iconContainer {
  width: spacing.$spacing-5;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header {
  display: flex;
}

.cell {
  text-align: right;
  padding-left: var(--cell-padding);
}