<template>
  <button class="chad-to-bottom">
    <ArrowDown />
  </button>
</template>

<script setup lang="ts">
import { ArrowDown } from '@lucide/vue'

defineOptions({
  name: 'ChadToBottom',
})
</script>

<style lang="scss">
.chad-to-bottom {
  cursor: pointer;
  width: 40px;
  aspect-ratio: 1;
  text-align: center;
  line-height: 40px;
  outline: var(--border-w) solid var(--ink);
  outline-offset: calc(var(--border-w) * -1);
  border: none;
  background-color: var(--grey-1);
  padding: 0;
  box-shadow: var(--shadow-sm);

  &:hover,
  &:focus {
    background-color: var(--grey-2);
  }

  &:active {
    background-color: var(--grey-3);
  }
}
</style>
