@import "../../tokens/border_radius";
@import "../../tokens/positioning";
@import "../../pb_caption/caption_mixin";

@media only screen and (max-width: $screen-xs-max) {
  [class^=pb_table] {
    &.table-sm.table-collapse-sm,
    &.table-md.table-collapse-sm,
    &.table-lg.table-collapse-sm {
      width: 100%;
      background: none !important;

      thead {
        tr {
          left: $offscreen;
          position: absolute;
          top: $offscreen;

          th {
            display: block;
            visibility: visible;
          }
        }
      }
      tbody {
        tr {
          td {
            display: block;
            visibility: visible;
            border-left-width: 1px !important;
            border-right-width: 1px !important;
            border-bottom-width: 0 !important;
            border-color: $border_light !important;
            min-height: 2.2em;
            position: relative;
            text-align:left;
            white-space: normal;
            &:before {
              content: attr(data-title);
              @include caption;
              width: 100% !important;
              white-space: nowrap !important;
              text-overflow: ellipsis !important;
              position: relative !important;
              top: 0 !important;
              left: 0 !important;
              height: 100% !important;
              padding-left: 0 !important;
              display: block !important;
            }

            &:first-child {
              margin-top: $space_md !important;
              border-top-width: 1px !important;
              border-top-color: $border_light !important;
              border-radius: $border_rad_light $border_rad_light 0 0;
            }

            &:last-child {
              border-radius: 0 0 $border_rad_light $border_rad_light;
              border-bottom-width: 1px !important;
            }
          }

          &:first-child {
            td {
              &:first-child {
                margin-top: $space-xs !important;
              }
            }
          }
        }
      }
      &.table-card {
        background: none !important;

        tbody {
          tr {
            td {
              background: $white !important;
              border-left-width: 1px !important;
              border-right-width: 1px !important;
              border-top-width: 1px !important;
              &:after {
                height: 0;
                background-color: transparent;
              }

              &:first-child {
                border-radius: $border_rad_light $border_rad_light 0 0 !important;
              }
              &:last-child {
                border-radius: 0 0 $border_rad_light $border_rad_light !important;
              }
            }
          }
        }
      }
      @media (hover:hover) {
        &:hover {
          tbody {
            tr {
              box-shadow: 0 0 0 $white !important;
            }
          }
        }
      }
      // reset the first and last to normalize
      @each $name, $value in $cell-pad-list {
        &.#{$name} {
          tbody {
            tr {
              td {
                &:first-child,
                &:last-child {
                  padding: $value $cell-gutter !important;
                }
              }
            }
          }
        }
      }
    }
  }
}