@import "../../tokens/opacity";

$transition-speed: 0.2s;
$border_hover_color_dark: lighten($border_dark, 5%);

[class^=pb_table] {
  &.table-sm,
  &.table-md,
  &.table-lg {
    &:not(.no-hover) {
      border-collapse: collapse;
      tbody {
        tr {
          box-shadow: 0 0 0 $white;
          transition: box-shadow $transition-speed ease;
          td {
            border-top-color: transparent;
            border-top-width: 0;
            transition: all $transition-speed ease;
          }
          @media (hover:hover) {
            td {
              position: relative;
              &:after {
                transition: background-color $transition-speed ease, height $transition-speed ease;
                content: "";
                position: absolute;
                display: block;
                top: -1px;
                left: 0;
                right: 0;
                height: 0;
                background-color: transparent;
              }
              &:first-child:after {
                left: -1px;
              }
              &:last-child:after {
                right: -1px;
              }
            }
            &:hover {
              box-shadow: 0 2px 10px 0 rgba($slate, $opacity-6);
              td {
                border-color: darken($border_light, 10%);
                border-top-width: 0;
                border-top-color: transparent;
                &:after {
                  transition: background-color $transition-speed ease, height $transition-speed ease;
                  background-color: darken($border_light, 10%);
                  height: 1px;
                }
              }
            }
          }
        }
      }
      &.table-card {
        border-collapse: separate;
        tbody {
          tr {
            td {
              &:first-child {
                border-left-width: 1px;
              }
              &:last-child {
                border-right-width: 1px;
              }
            }
          }
        }
      }

      &.dark  {
        tbody {
          tr {
            @media (hover:hover) {
              &:hover {
                box-shadow: 0 2px 10px 0 $shadow_dark;
                td {
                  border-top-width: 0;
                  border-top-color: transparent;
                  border-color: $border_hover_color_dark !important;
                  &:after {
                    transition: background-color $transition-speed ease, height $transition-speed ease;
                    background-color: $border_hover_color_dark !important;
                    height: 1px;
                  }
                }
              }
            }
          }
        }
      }

    }
  }
}