Mixins

Overall Mixins

@use './_scrollbar.tokens.scss' as *;
@use './_table.tokens.scss' as *;

@mixin scrollbar {
  &::-webkit-scrollbar {
    width: $scrollbar-width;
    height: $scrollbar-width;
  }

  &::-webkit-scrollbar-track {
    background-color: $scrollbar-bgColor;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $scrollbar-cornerRadius;
    -webkit-border-radius: $scrollbar-tiny-cornerRadius;
    -moz-border-radius: $scrollbar-tiny-cornerRadius;
    -ms-border-radius: $scrollbar-tiny-cornerRadius;
    -o-border-radius: $scrollbar-tiny-cornerRadius;

    background-color: $scrollbar-thumb;
    border: 1px solid transparent;
    background-clip: padding-box;

    &:hover {
      background-color: $scrollbar-thumb--hover;
    }

    &:active {
      background-color: $scrollbar-thumb--active;
    }
  }

  &::-webkit-scrollbar-button {
    background-position: center;
    background-repeat: no-repeat;
    background-size: var(--gutter-xs);
    background-color: $scrollbar-bgColor;

    &:vertical:decrement {
      background-image: var(--icon-chevron_up);
    }

    &:horizontal:decrement {
      background-image: var(--icon-chevron_left);
    }

    &:vertical:increment {
      background-image: var(--icon-chevron_down);
    }

    &:horizontal:increment {
      background-image: var(--icon-chevron_right);
    }
  }
}

@mixin scrollbar-tiny {
  height: 100%;
  overflow-y: auto;
  scrollbar-gutter: stable;

  &::-webkit-scrollbar {
    width: $scrollbar-tiny-total-width;
    height: $scrollbar-tiny-total-width;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: $scrollbar-tiny-cornerRadius;
    -webkit-border-radius: $scrollbar-tiny-cornerRadius;
    -moz-border-radius: $scrollbar-tiny-cornerRadius;
    -ms-border-radius: $scrollbar-tiny-cornerRadius;
    -o-border-radius: $scrollbar-tiny-cornerRadius;

    background: $scrollbar-tiny-thumb-bgColor;
    // Use transparent borders to create 1px padding on both sides
    border-left: $scrollbar-tiny-padding solid transparent;
    border-right: $scrollbar-tiny-padding solid transparent;
    // Clip background to content box so it only shows in the middle 8px
    background-clip: content-box;

    &:active {
      background-color: $scrollbar-tiny-thumb-bgColor--active;
    }

    &:hover {
      background-color: $scrollbar-tiny-thumb-bgColor--hover;
    }
  }
}

@mixin table {
  display: table;
  @extend %body;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
  font-family: $table-font-family;
  
  :is(th, td) {
    display: table-cell;
    font-size: $table-font-size;
    padding: $table-cell-padding-vertical $table-cell-padding-horizontal;
    text-align: left;
    vertical-align: middle;
    background-color: $table-bgColor;
    z-index: 0;
    
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top: 1px solid $table-border-color--row;

    > * {
      display: inline-flex;
      vertical-align: middle;
    }
    
    > * + * {
      margin-inline-start: var(--gutter-xs);
    }
  }
  
  thead th {
    border-top: 0;
    border: 1px solid $table-border-color--row;
    color: $table-header-color;
    font-weight: $table-font-weight--emphasis;
    background-color: $table-bgColor;
    z-index: 2;
  }

  tbody th {
    color: $table-rowHeader-color;
    font-weight: $table-font-weight--emphasis;
  }

  tbody tr:nth-child(odd) :is(td) {
    background-color: $table-bgColor--alt;
  }
}

@mixin table-cell-right {
  text-align: right;
  vertical-align: middle;

  > * {
    width: fit-content;
    max-width: 100%;
    margin-inline-start: auto;
  }
}

@mixin table-cell-center {
  text-align: center;
  vertical-align: middle;

  > * {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
  }
}

@mixin table-cell-stacked {
  vertical-align: top;
  white-space: normal;

  > * {
    display: block;
    width: fit-content;
    max-width: 100%;
  }

  > * + * {
    margin-top: $table-cell-stack-gap;
    margin-inline-start: 0;
  }

  &:has(> :only-child) {
    vertical-align: middle;
  }
}

@mixin table-cell-spaced {
  position: relative;
  vertical-align: middle;
  white-space: normal;

  --table-cell-spaced-end-slot: calc(var(--gutter-m) + 24px);
  padding-inline-end: calc(#{$table-cell-padding-horizontal} + var(--table-cell-spaced-end-slot));

  > * + * {
    margin-inline-start: 0;
  }

  > :last-child:not(:only-child) {
    position: absolute;
    inset-inline-end: $table-cell-padding-horizontal;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
}

// Inner flex row for evenly distributing multiple children inside a cell.
// Usage: <td><div class="bds-table__spaced-between">...</div></td>
@mixin table-spaced-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: var(--gutter-xs);
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal;

  > * + * {
    margin-inline-start: 0;
  }
}