@import '../../../../styles/tools/mediaQueries.scss';
@import '../../../../styles/tools/mixins/font.scss';

.produktuTaula {
  width: 100%;
  table-layout: fixed;
  overflow-wrap: break-word;
  border-collapse: separate;
  border-spacing: 0 var(--size-tiny);

  @media #{$fromTablet} {
    border-spacing: 0 var(--size-tiny);
  }
}

.ezaugarria {
  width: var(--size-base);
  height: var(--size-base);
  padding: 0 var(--size-xtiny);
  vertical-align: top;

  @media #{$fromTablet} {
    width: var(--size-medium);
    height: var(--size-medium);
  }
}

.izena {
  text-align: left;
  font-weight: var(--font-weight-regular);
  padding: 0 var(--size-xtiny);
  vertical-align: top;
}

.prezioa {
  width: var(--size-huge);
  text-align: right;
  font-weight: var(--font-weight-regular);
  padding: 0 var(--size-xtiny);
  vertical-align: top;
}

.mota {
  text-align: left;
  padding-left: 52px;
  margin-bottom: var(--size-mini);

  @include largeFont;

  &::after {
    content: '.';
  }

  @media #{$fromTablet} {
    padding-left: 67px;
  }
}

.alergenoa {
  color: var(--color-morea);
  font-weight: var(--font-weight-bold);

  &:not(:last-child)::after {
    content: ', ';
  }
}

.tableGroup {
  display: table-header-group;
}
