www/assets/scss/_utils.scss

@mixin hide-scroll {
  &::-webkit-scrollbar {
    display: none
  }

  -ms-overflow-style: none; // Edge
  scrollbar-width: none; // Firefox
}

@mixin border-first-last($radius) {
  &:first-child {
    border-top-left-radius: $radius;
    border-top-right-radius: $radius;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
  }

  &:last-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }

  &:only-child {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }
}

@mixin border-2x2($radius) {

  &:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius: $radius;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  &:nth-child(2) {
    border-top-right-radius: $radius;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }

  &:nth-last-child(2) {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: 0px;
  }

  &:last-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: $radius;
  }
}

@mixin border-linear($radius) {
  &:first-child {
    border-top-left-radius: $radius;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: $radius;
  }

  &:last-child {
    border-top-right-radius: $radius;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: $radius;
  }

  &:only-child {
    border-top-right-radius: $radius;
    border-top-left-radius: $radius;
    border-bottom-left-radius: $radius;
    border-bottom-right-radius: $radius;
  }
}