@use "../../../styles/tokens/breakpoint";
@use "./config";

@mixin base {
  height: 100%;

  thead tr {
    border-bottom: config.$table-header-border;

    th {
      border-bottom: 0;
    }
  }

  @include breakpoint.get("xs", "down") {
    tr {
      display: flex;
      flex-wrap: wrap;
      margin-top: -2px;
    }

    td:empty {
      display: none;
    }

    tfoot tr {
      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
    }
  }

  @include breakpoint.get("md") {
    td,
    th {
      padding-right: config.$default-spacing !important;
    }

    // stylelint-disable selector-max-compound-selectors
    > tbody > tr > td:first-child,
    > tbody > tr > th:first-child,
    > tfoot > tr > td:first-child,
    > tfoot > tr > th:first-child,
    > thead > tr > td:first-child,
    > thead > tr > th:first-child {
      padding-left: config.$default-spacing;
    }
  }

  tbody > tr:last-child {
    border-bottom: config.$table-last-border;
  }

  td:empty,
  th:empty {
    padding: 0 !important;
  }
}

@mixin product {
  @include breakpoint.get("xs", "down") {
    flex-basis: config.$product-size;
    flex-grow: 1;

    .bar > .bar__item:not(:last-child) {
      margin-right: config.$mobile-spacing;
    }

    tfoot & {
      flex-basis: auto;
      max-width: none;
    }
  }
}

@mixin discount-position--top {
  margin-top: config.$default-spacing;
}

@mixin discount-position--left {
  padding-left: config.$subitem-discount-spacing;
}

@mixin subitem-position {
  margin-left: config.$mobile-spacing;
  @include breakpoint.get("md") {
    margin-left: config.$default-spacing;
  }
}

@mixin button {
  font-size: config.$button-font-size !important;

  svg {
    margin-right: -#{config.$button-margin};
    margin-left: -#{config.$button-margin};
  }

  @include breakpoint.get("md") {
    svg {
      margin-right: config.$button-margin !important;
    }
  }
}

@mixin price {
  @include breakpoint.get("xs", "down") {
    padding-top: 0 !important;
    order: 1;
    flex-basis: 100%;

    thead & {
      display: none;
      border-bottom: 0;
    }

    tfoot & {
      flex-basis: auto;
      padding-top: config.$default-spacing !important;
      padding-bottom: config.$default-spacing !important;
    }
  }
}

@mixin large {
  th,
  td {
    @include breakpoint.get("md") {
      padding: config.$default-spacing !important;
    }
  }

  font-size: config.$large-font-size--mobile;

  @include breakpoint.get("md") {
    font-size: config.$large-font-size--desktop;
  }
}