@use "sass:color";
@use "../../atoms/numbers";
@use "../../atoms/colours" as colour;

@mixin tab($darkmode: false) {
  tr {
    height: 24px;
    margin: 0;
    padding: 0;
    background-color: unset;
  }

  td {
    margin: 0;
    padding: 0;
    height: 24px;
  }

  .spell.rollable {
    position: relative;

    svg {

      position: absolute;
      width: 32px;
      height: 32px;
      z-index: 2;
      top: 0;
      left: -4px;

      path {
        fill: colour.$zauber-color;
      }
    }

    &:hover {
      @include colour.svg-highlight;
    }

  }


  .die-column {
    width: 24px;
  }

  .clickable {
    span {
      position: relative;
      z-index: 1;

      @include colour.highlight;
    }
  }

  tbody {

    tr {

      position: relative;

      &::after {
        content: '';
        background-image: linear-gradient(to right, rgba(color.scale(colour.$zauber-color, $lightness: numbers.$zebra_light), numbers.$start_gradient), rgba(color.scale(colour.$zauber-color, $lightness: numbers.$zebra_light), numbers.$end_2_gradient));
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        position: absolute;
        left: 12px;
        bottom: 2px;
        height: 2px;
        right: 33%;
        z-index: 0;
        pointer-events: none;
      }

      &:nth-child(odd) {
        &::after {
          background-image: linear-gradient(to right, rgba(color.scale(colour.$zauber-color, $lightness: numbers.$zebra_dark), numbers.$start_gradient), rgba(color.scale(colour.$zauber-color, $lightness: numbers.$zebra_dark), numbers.$end_2_gradient));
        }
      }
    }

  }

  .merkmal-list {
    list-style: none;
    margin: 0;
    padding: 0;
    text-indent: 0;

    li {
      display: inline-block;
      padding: 0 4px;
    }
  }
}

.mini-spells {
  height: 100%;
  display: flex;
  flex-direction: column;

  .table-header {
    display: grid;
    grid-template-columns: 1fr 100px 30px;
    padding: 0 8px;
    font-weight: bold;
  }

  .scrollable-table {
    overflow-x: hidden;
    overflow-y: auto;

    thead {
      display: none;

    }


    tr {

      td:nth-child(1) {
        width: 32px;
      }

      td:nth-child(3) {
        width: 100px;
      }

      td:nth-child(4) {
        width: 30px;
      }

      .spell.rollable {
        position: relative;

        svg {

          position: absolute;
          width: 32px;
          height: 32px;
          z-index: 2;
          top: 0;
          left: -4px;

          path {
            fill: colour.$zauber-color;
          }
        }
      }
    }
  }
}