shlink-web-client/shlink-frontend-kit/src/utils/ResponsiveTable.scss

@import '../base';

.responsive-table__header {
  @media (max-width: $responsiveTableBreakpoint) {
    display: none;
  }
}

.responsive-table.table > :not(:first-child) {
  @media (max-width: $responsiveTableBreakpoint) {
    border: none;
  }
}

.responsive-table__row {
  @media (max-width: $responsiveTableBreakpoint) {
    display: block;
    border-bottom: 1px solid var(--border-color);
    border-top: 2px solid var(--border-color);
    position: relative;

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
}

.responsive-table__cell.responsive-table__cell {
  vertical-align: middle !important;

  @media (max-width: $responsiveTableBreakpoint) {
    display: block;
    width: 100%;
    position: relative;
    padding: .5rem;
    font-size: .9rem;

    &[data-th]:before {
      content: attr(data-th) ': ';
      font-weight: 700;
    }

    &:last-child {
      position: absolute;
      top: 3.5px;
      right: .5rem;
      width: auto;
      padding: 0;
      border: none;
    }
  }
}

.responsive-table__cell.responsive-table__cell .btn-sm {
  @media (max-width: $responsiveTableBreakpoint) {
    padding: 0.1rem 0.4rem;
    margin-top: 0.16rem;
  }
}