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

@mixin tab {
  tr {
    height: 24px;
    margin: 0;
    padding: 0;
  }

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

  $color: #05f;

  .spell.rollable svg {
    width: 24px;
    height: 24px;
    top: 1px;
    z-index: 1;
    position: relative;

    .border {
      fill: #0000;
    }

    .center {
      fill: $color;
      stroke: colour.$rollable-die-border-color;
    }

    .topleft {
      fill: color.adjust($color, $lightness: numbers.$lighter_factor);
      stroke: colour.$rollable-die-border-color;
    }

    .bottomleft {
      fill: color.adjust($color, $lightness: numbers.$lightest_factor);
      stroke: colour.$rollable-die-border-color;
    }

    .topright {
      fill: color.adjust($color, $lightness: numbers.$darken_factor);
      stroke: colour.$rollable-die-border-color;
    }

    .bottomright, .bottom {
      fill: color.adjust($color, $lightness: numbers.$darkest_factor);
      stroke: colour.$rollable-die-border-color;
    }
  }

  .die-column {
    width: 24px;
  }

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

  tbody {

    tr {

      position: relative;

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

      &:nth-child(odd) {
        &::after {
          background-image: linear-gradient(to right, rgba(color.scale($color, $lightness: numbers.$zebra_dark), numbers.$start_gradient), rgba(color.scale($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;
    }
  }
}