export function ArrowDown() {
  return (
    <svg
      width="17"
      height="16"
      viewBox="0 0 17 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M5.20187 7.57687C4.94152 7.31652 4.94152 6.89441 5.20187 6.63406C5.46222 6.37371 5.88433 6.37371 6.14468 6.63406L8.97311 9.46249C9.23346 9.72284 9.23346 10.1449 8.97311 10.4053C8.71276 10.6656 8.29065 10.6656 8.0303 10.4053L5.20187 7.57687Z"
        className="fill-platform-navigation-foreground"
      />
      <path
        d="M8.0303 10.4053C7.76995 10.145 7.76995 9.72284 8.0303 9.46249L10.8587 6.63406C11.1191 6.37371 11.5412 6.37371 11.8015 6.63406C12.0619 6.89441 12.0619 7.31652 11.8015 7.57687L8.97311 10.4053C8.71276 10.6656 8.29065 10.6656 8.0303 10.4053Z"
        className="fill-platform-navigation-foreground"
      />
    </svg>
  )
}

export function ArrowUp() {
  return (
    <svg
      width="17"
      height="16"
      viewBox="0 0 17 16"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M11.7981 8.42313C12.0585 8.68348 12.0585 9.10559 11.7981 9.36594C11.5378 9.62629 11.1157 9.62629 10.8553 9.36594L8.02689 6.53751C7.76654 6.27716 7.76654 5.85505 8.02689 5.5947C8.28724 5.33435 8.70935 5.33435 8.9697 5.5947L11.7981 8.42313Z"
        fill="var(--brand)"
      />
      <path
        d="M8.9697 5.5947C9.23005 5.85505 9.23005 6.27716 8.9697 6.53751L6.14127 9.36594C5.88092 9.62629 5.45881 9.62629 5.19846 9.36594C4.93811 9.10559 4.93811 8.68348 5.19846 8.42313L8.02689 5.5947C8.28724 5.33435 8.70935 5.33435 8.9697 5.5947Z"
        fill="var(--brand)"
      />
    </svg>
  )
}